feat: add react tour

apps/dokploy/components/dashboard/settings/servers/edit-script.tsx

@@ -0,0 +1,167 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FileTerminal } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface Props {
+	serverId: string;
+}
+
+const schema = z.object({
+	command: z.string().min(1, {
+		message: "Command is required",
+	}),
+});
+
+type Schema = z.infer<typeof schema>;
+
+export const EditScript = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const { data: server } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const { mutateAsync, isLoading } = api.server.update.useMutation();
+
+	const { data: defaultCommand } = api.server.getDefaultCommand.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			command: "",
+		},
+		resolver: zodResolver(schema),
+	});
+
+	useEffect(() => {
+		if (server) {
+			form.reset({
+				command: server.command || defaultCommand,
+			});
+		}
+	}, [server, defaultCommand]);
+
+	const onSubmit = async (formData: Schema) => {
+		if (server) {
+			await mutateAsync({
+				...server,
+				command: formData.command || "",
+				serverId,
+			})
+				.then((data) => {
+					toast.success("Script modified successfully");
+				})
+				.catch(() => {
+					toast.error("Error modifying the script");
+				});
+		}
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					Modify Script
+					<FileTerminal className="size-4 text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl overflow-x-hidden">
+				<DialogHeader>
+					<DialogTitle>Modify Script</DialogTitle>
+					<DialogDescription>
+						Modify the script which install everything necessary to deploy
+						applications on your server,
+					</DialogDescription>
+
+					<AlertBlock type="warning">
+						We suggest to don't modify the script if you don't know what you are
+						doing
+					</AlertBlock>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-application"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="command"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Command</FormLabel>
+										<FormControl className="max-h-[75vh] max-w-[60rem] overflow-y-scroll overflow-x-hidden">
+											<CodeEditor
+												language="shell"
+												{...field}
+												placeholder={`
+set -e
+echo "Hello world"
+`}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter className="flex justify-between w-full">
+					<Button
+						variant="secondary"
+						onClick={() => {
+							form.reset({
+								command: defaultCommand || "",
+							});
+						}}
+					>
+						Reset
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-application"
+						type="submit"
+					>
+						Save
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/setup-server.tsx

@@ -32,6 +32,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
+import { EditScript } from "./edit-script";
 import { GPUSupport } from "./gpu-support";
 import { ValidateServer } from "./validate-server";
 
@@ -89,7 +90,12 @@ export const SetupServer = ({ serverId }: Props) => {
 						</AlertBlock>
 					</div>
 				) : (
-					<div id="hook-form-add-gitlab" className="grid w-full gap-1">
+					<div id="hook-form-add-gitlab" className="grid w-full gap-4">
+						<AlertBlock type="warning">
+							Using a root user is required to ensure everything works as
+							expected.
+						</AlertBlock>
+
 						<Tabs defaultValue="ssh-keys">
 							<TabsList className="grid grid-cols-4 w-[600px]">
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
@@ -198,6 +204,28 @@ export const SetupServer = ({ serverId }: Props) => {
 											</li>
 										</ul>
 									</div>
+									<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
+										<span className="text-base font-semibold text-primary">
+											Supported Distros:
+										</span>
+										<p>
+											We strongly recommend to use the following distros to
+											ensure the best experience:
+										</p>
+										<ul>
+											<li>1. Ubuntu 24.04 LTS</li>
+											<li>2. Ubuntu 23.10 LTS </li>
+											<li>3. Ubuntu 22.04 LTS</li>
+											<li>4. Ubuntu 20.04 LTS</li>
+											<li>5. Ubuntu 18.04 LTS</li>
+											<li>6. Debian 12</li>
+											<li>7. Debian 11</li>
+											<li>8. Debian 10</li>
+											<li>9. Fedora 40</li>
+											<li>10. Centos 9</li>
+											<li>11. Centos 8</li>
+										</ul>
+									</div>
 								</div>
 							</TabsContent>
 							<TabsContent value="deployments">
@@ -214,24 +242,29 @@ export const SetupServer = ({ serverId }: Props) => {
 															See all the 5 Server Setup
 														</CardDescription>
 													</div>
-													<DialogAction
-														title={"Setup Server?"}
-														description="This will setup the server and all associated data"
-														onClick={async () => {
-															await mutateAsync({
-																serverId: server?.serverId || "",
-															})
-																.then(async () => {
-																	refetch();
-																	toast.success("Server setup successfully");
+													<div className="flex flex-row gap-2">
+														<EditScript serverId={server?.serverId || ""} />
+														<DialogAction
+															title={"Setup Server?"}
+															description="This will setup the server and all associated data"
+															onClick={async () => {
+																await mutateAsync({
+																	serverId: server?.serverId || "",
 																})
-																.catch(() => {
-																	toast.error("Error configuring server");
-																});
-														}}
-													>
-														<Button isLoading={isLoading}>Setup Server</Button>
-													</DialogAction>
+																	.then(async () => {
+																		refetch();
+																		toast.success("Server setup successfully");
+																	})
+																	.catch(() => {
+																		toast.error("Error configuring server");
+																	});
+															}}
+														>
+															<Button isLoading={isLoading}>
+																Setup Server
+															</Button>
+														</DialogAction>
+													</div>
 												</div>
 											</CardHeader>
 											<CardContent className="flex flex-col gap-4">

apps/dokploy/components/shared/code-editor.tsx

@@ -2,7 +2,9 @@ import { cn } from "@/lib/utils";
 import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
+
 import { properties } from "@codemirror/legacy-modes/mode/properties";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
 import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
@@ -10,7 +12,7 @@ import { useTheme } from "next-themes";
 interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
-	language?: "yaml" | "json" | "properties";
+	language?: "yaml" | "json" | "properties" | "shell";
 	lineWrapping?: boolean;
 	lineNumbers?: boolean;
 }
@@ -39,7 +41,9 @@ export const CodeEditor = ({
 						? yaml()
 						: language === "json"
 							? json()
-							: StreamLanguage.define(properties),
+							: language === "shell"
+								? StreamLanguage.define(shell)
+								: StreamLanguage.define(properties),
 					props.lineWrapping ? EditorView.lineWrapping : [],
 				]}
 				{...props}

apps/dokploy/drizzle/0051_hard_gorgon.sql

@@ -0,0 +1 @@
+ALTER TABLE "server" ADD COLUMN "command" text DEFAULT '' NOT NULL;

apps/dokploy/drizzle/meta/_journal.json

@@ -358,6 +358,13 @@
       "when": 1733889104203,
       "tag": "0050_nappy_wrecker",
       "breakpoints": true
+    },
+    {
+      "idx": 51,
+      "version": "6",
+      "when": 1734241482851,
+      "tag": "0051_hard_gorgon",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/package.json

@@ -35,6 +35,7 @@
 		"test": "vitest --config __test__/vitest.config.ts"
 	},
 	"dependencies": {
+		"@reactour/tour": "3.7.0",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",

apps/dokploy/pages/_app.tsx

@@ -1,8 +1,10 @@
 import "@/styles/globals.css";
 
+import { SearchCommand } from "@/components/dashboard/search-command";
 import { Toaster } from "@/components/ui/sonner";
 import { Languages } from "@/lib/languages";
 import { api } from "@/utils/api";
+import { TourProvider } from "@reactour/tour";
 import type { NextPage } from "next";
 import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
@@ -11,74 +13,83 @@ import { Inter } from "next/font/google";
 import Head from "next/head";
 import Script from "next/script";
 import type { ReactElement, ReactNode } from "react";
-import { SearchCommand } from "@/components/dashboard/search-command";
 
 const inter = Inter({ subsets: ["latin"] });
 
+export const steps = [
+	{
+		selector: ".first-step",
+		content: "This is the first Step",
+	},
+	{
+		selector: ".second-step",
+		content: "This is the second Step",
+	},
+	{
+		selector: ".third-step",
+		content: "This is the third Step",
+	},
+];
+
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
-  getLayout?: (page: ReactElement) => ReactNode;
-  // session: Session | null;
-  theme?: string;
+	getLayout?: (page: ReactElement) => ReactNode;
+	// session: Session | null;
+	theme?: string;
 };
 
 type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
+	Component: NextPageWithLayout;
 };
 
 const MyApp = ({
-  Component,
-  pageProps: { ...pageProps },
+	Component,
+	pageProps: { ...pageProps },
 }: AppPropsWithLayout) => {
-  const getLayout = Component.getLayout ?? ((page) => page);
+	const getLayout = Component.getLayout ?? ((page) => page);
 
-  return (
-    <>
-      <style jsx global>{`
+	return (
+		<>
+			<style jsx global>{`
         :root {
           --font-inter: ${inter.style.fontFamily};
         }
       `}</style>
-      <Head>
-        <title>Dokploy</title>
-      </Head>
-      {process.env.NEXT_PUBLIC_UMAMI_HOST &&
-        process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
-          <Script
-            src={process.env.NEXT_PUBLIC_UMAMI_HOST}
-            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-          />
-        )}
+			<Head>
+				<title>Dokploy</title>
+			</Head>
+			{process.env.NEXT_PUBLIC_UMAMI_HOST &&
+				process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
+					<Script
+						src={process.env.NEXT_PUBLIC_UMAMI_HOST}
+						data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+					/>
+				)}
 
-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
-        forcedTheme={Component.theme}
-      >
-        <Toaster richColors />
-        <SearchCommand />
-        {getLayout(<Component {...pageProps} />)}
-      </ThemeProvider>
-    </>
-  );
+			<TourProvider steps={steps}>
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="system"
+					enableSystem
+					disableTransitionOnChange
+					forcedTheme={Component.theme}
+				>
+					<Toaster richColors />
+					<SearchCommand />
+					{getLayout(<Component {...pageProps} />)}
+				</ThemeProvider>
+			</TourProvider>
+		</>
+	);
 };
 
 export default api.withTRPC(
-  appWithTranslation(
-    MyApp,
-    // keep this in sync with next-i18next.config.js
-    // if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
-    // Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
-    // if one day every page is translated, we can safely remove this config.
-    {
-      i18n: {
-        defaultLocale: "en",
-        locales: Object.values(Languages),
-        localeDetection: false,
-      },
-      fallbackLng: "en",
-      keySeparator: false,
-    }
-  )
+	appWithTranslation(MyApp, {
+		i18n: {
+			defaultLocale: "en",
+			locales: Object.values(Languages),
+			localeDetection: false,
+		},
+		fallbackLng: "en",
+		keySeparator: false,
+	}),
 );

apps/dokploy/server/api/routers/server.ts

@@ -18,6 +18,7 @@ import {
 import {
 	IS_CLOUD,
 	createServer,
+	defaultCommand,
 	deleteServer,
 	findAdminById,
 	findServerById,
@@ -69,6 +70,11 @@ export const serverRouter = createTRPCRouter({
 
 			return server;
 		}),
+	getDefaultCommand: protectedProcedure
+		.input(apiFindOneServer)
+		.query(async ({ input, ctx }) => {
+			return defaultCommand();
+		}),
 	all: protectedProcedure.query(async ({ ctx }) => {
 		const result = await db
 			.select({

apps/dokploy/server/wss/docker-container-terminal.ts

@@ -102,7 +102,6 @@ export const setupDockerContainerTerminalWebSocketServer = (
 						port: server.port,
 						username: server.username,
 						privateKey: server.sshKey?.privateKey,
-						timeout: 99999,
 					});
 			} else {
 				const shell = getShell();

apps/dokploy/server/wss/terminal.ts

@@ -124,7 +124,6 @@ export const setupTerminalWebSocketServer = (
 				port: server.port,
 				username: server.username,
 				privateKey: server.sshKey?.privateKey,
-				timeout: 99999,
 			});
 	});
 };