Merge pull request #1931 from nktnet1/nginx-static-spa-build

feat: added SPA option for static sites

.github/workflows/pull-request.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.9.0
+          node-version: 20.16.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: pnpm run server:build
@@ -26,7 +26,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.9.0
+          node-version: 20.16.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: pnpm run server:build
@@ -39,7 +39,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.9.0
+          node-version: 20.16.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: pnpm run server:build

.nvmrc

@@ -1 +1 @@
-20.9.0
+20.16.0

CONTRIBUTING.md

@@ -52,7 +52,7 @@ feat: add new feature
 
 Before you start, please make the clone based on the `canary` branch, since the `main` branch is the source of truth and should always reflect the latest stable release, also the PRs will be merged to the `canary` branch.
 
-We use Node v20.9.0 and recommend this specific version. If you have nvm installed, you can run `nvm install 20.9.0 && nvm use` in the root directory.
+We use Node v20.16.0 and recommend this specific version. If you have nvm installed, you can run `nvm install 20.16.0 && nvm use` in the root directory.
 
 ```bash
 git clone https://github.com/dokploy/dokploy.git

apps/dokploy/.nvmrc

@@ -1 +1 @@
-20.9.0
+20.16.0

apps/dokploy/__test__/drop/drop.test.test.ts

@@ -105,6 +105,7 @@ const baseApp: ApplicationNested = {
 	ports: [],
 	projectId: "",
 	publishDirectory: null,
+	isStaticSpa: null,
 	redirects: [],
 	refreshToken: "",
 	registry: null,

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -85,6 +85,7 @@ const baseApp: ApplicationNested = {
 	ports: [],
 	projectId: "",
 	publishDirectory: null,
+	isStaticSpa: null,
 	redirects: [],
 	refreshToken: "",
 	registry: null,

apps/dokploy/components/dashboard/application/build/show.tsx

@@ -12,6 +12,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -63,10 +64,11 @@ const mySchema = z.discriminatedUnion("buildType", [
 		publishDirectory: z.string().optional(),
 	}),
 	z.object({
-		buildType: z.literal(BuildType.static),
+		buildType: z.literal(BuildType.railpack),
 	}),
 	z.object({
-		buildType: z.literal(BuildType.railpack),
+		buildType: z.literal(BuildType.static),
+		isStaticSpa: z.boolean().default(false),
 	}),
 ]);
 
@@ -83,6 +85,7 @@ interface ApplicationData {
 	dockerBuildStage?: string | null;
 	herokuVersion?: string | null;
 	publishDirectory?: string | null;
+	isStaticSpa?: boolean | null;
 }
 
 function isValidBuildType(value: string): value is BuildType {
@@ -115,6 +118,7 @@ const resetData = (data: ApplicationData): AddTemplate => {
 		case BuildType.static:
 			return {
 				buildType: BuildType.static,
+				isStaticSpa: data.isStaticSpa ?? false,
 			};
 		case BuildType.railpack:
 			return {
@@ -174,6 +178,8 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 				data.buildType === BuildType.heroku_buildpacks
 					? data.herokuVersion
 					: null,
+			isStaticSpa:
+				data.buildType === BuildType.static ? data.isStaticSpa : null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -364,6 +370,30 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 								)}
 							/>
 						)}
+						{buildType === BuildType.static && (
+							<FormField
+								control={form.control}
+								name="isStaticSpa"
+								render={({ field }) => (
+									<FormItem>
+										<FormControl>
+											<div className="flex items-center gap-x-2 p-2">
+												<Checkbox
+													id="checkboxIsStaticSpa"
+													value={String(field.value)}
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+												<FormLabel htmlFor="checkboxIsStaticSpa">
+													Single Page Application (SPA)
+												</FormLabel>
+											</div>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 						<div className="flex w-full justify-end">
 							<Button isLoading={isLoading} type="submit">
 								Save

apps/dokploy/drizzle/0092_stiff_the_watchers.sql

@@ -0,0 +1 @@
+ALTER TABLE "application" ADD COLUMN "isStaticSpa" boolean;

apps/dokploy/drizzle/meta/_journal.json

@@ -645,6 +645,13 @@
       "when": 1746518402168,
       "tag": "0091_spotty_kulan_gath",
       "breakpoints": true
+    },
+    {
+      "idx": 92,
+      "version": "7",
+      "when": 1747713229160,
+      "tag": "0092_stiff_the_watchers",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/package.json

@@ -188,7 +188,7 @@
 	},
 	"packageManager": "pnpm@9.5.0",
 	"engines": {
-		"node": "^20.9.0",
+		"node": "^20.16.0",
 		"pnpm": ">=9.5.0"
 	},
 	"lint-staged": {

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

@@ -330,6 +330,7 @@ export const applicationRouter = createTRPCRouter({
 				dockerContextPath: input.dockerContextPath,
 				dockerBuildStage: input.dockerBuildStage,
 				herokuVersion: input.herokuVersion,
+				isStaticSpa: input.isStaticSpa,
 			});
 
 			return true;

package.json

@@ -32,7 +32,7 @@
 	},
 	"packageManager": "pnpm@9.5.0",
 	"engines": {
-		"node": "^20.9.0",
+		"node": "^20.16.0",
 		"pnpm": ">=9.5.0"
 	},
 	"lint-staged": {

packages/server/src/db/schema/application.ts

@@ -206,6 +206,7 @@ export const applications = pgTable("application", {
 	buildType: buildType("buildType").notNull().default("nixpacks"),
 	herokuVersion: text("herokuVersion").default("24"),
 	publishDirectory: text("publishDirectory"),
+	isStaticSpa: boolean("isStaticSpa"),
 	createdAt: text("createdAt")
 		.notNull()
 		.$defaultFn(() => new Date().toISOString()),
@@ -409,6 +410,7 @@ const createSchema = createInsertSchema(applications, {
 	]),
 	herokuVersion: z.string().optional(),
 	publishDirectory: z.string().optional(),
+	isStaticSpa: z.boolean().optional(),
 	owner: z.string(),
 	healthCheckSwarm: HealthCheckSwarmSchema.nullable(),
 	restartPolicySwarm: RestartPolicySwarmSchema.nullable(),
@@ -461,7 +463,7 @@ export const apiSaveBuildType = createSchema
 		herokuVersion: true,
 	})
 	.required()
-	.merge(createSchema.pick({ publishDirectory: true }));
+	.merge(createSchema.pick({ publishDirectory: true, isStaticSpa: true }));
 
 export const apiSaveGithubProvider = createSchema
 	.pick({

packages/server/src/utils/builders/static.ts

@@ -7,21 +7,58 @@ import type { ApplicationNested } from ".";
 import { createFile, getCreateFileCommand } from "../docker/utils";
 import { getBuildAppDirectory } from "../filesystem/directory";
 
+const nginxSpaConfig = `
+worker_processes 1;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  include mime.types;
+  default_type  application/octet-stream;
+
+  access_log /dev/stdout;
+  error_log /dev/stderr;
+
+  server {
+    listen 80;
+    location / {
+      root   /usr/share/nginx/html;
+      index  index.html index.htm;
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}
+`;
+
 export const buildStatic = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { publishDirectory } = application;
+	const { publishDirectory, isStaticSpa } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 
 	try {
+		if (isStaticSpa) {
+			createFile(buildAppDirectory, "nginx.conf", nginxSpaConfig);
+		}
+
+		createFile(
+			buildAppDirectory,
+			".dockerignore",
+			[".git", ".env", "Dockerfile", ".dockerignore"].join("\n"),
+		);
+
 		createFile(
 			buildAppDirectory,
 			"Dockerfile",
 			[
 				"FROM nginx:alpine",
 				"WORKDIR /usr/share/nginx/html/",
+				isStaticSpa ? "COPY nginx.conf /etc/nginx/nginx.conf" : "",
 				`COPY ${publishDirectory || "."} .`,
+				'CMD ["nginx", "-g", "daemon off;"]',
 			].join("\n"),
 		);