Merge pull request #719 from Dokploy/443-implement-coolifyio-like-support-of-envs-and-railwayapp-envs-shared-project-service-env

feat: add shared enviroment variables

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

@@ -32,6 +32,14 @@ const baseApp: ApplicationNested = {
 	serverId: "",
 	branch: null,
 	dockerBuildStage: "",
+	project: {
+		env: "",
+		adminId: "",
+		name: "",
+		description: "",
+		createdAt: "",
+		projectId: "",
+	},
 	buildArgs: null,
 	buildPath: "/",
 	gitlabPathNamespace: "",

apps/dokploy/__test__/env/shared.test.ts

@@ -0,0 +1,179 @@
+import { prepareEnvironmentVariables } from "@dokploy/server/index";
+import { describe, expect, it } from "vitest";
+
+const projectEnv = `
+ENVIRONMENT=staging
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db
+PORT=3000
+`;
+const serviceEnv = `
+ENVIRONMENT=\${{project.ENVIRONMENT}}
+DATABASE_URL=\${{project.DATABASE_URL}}
+SERVICE_PORT=4000
+`;
+
+describe("prepareEnvironmentVariables", () => {
+	it("resolves project variables correctly", () => {
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=staging",
+			"DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db",
+			"SERVICE_PORT=4000",
+		]);
+	});
+
+	it("handles undefined project variables", () => {
+		const incompleteProjectEnv = `
+		NODE_ENV=production
+		`;
+
+		const invalidServiceEnv = `
+		UNDEFINED_VAR=\${{project.UNDEFINED_VAR}}
+		`;
+
+		expect(
+			() =>
+				prepareEnvironmentVariables(invalidServiceEnv, incompleteProjectEnv), // Cambiado el orden
+		).toThrow("Invalid project environment variable: project.UNDEFINED_VAR");
+	});
+	it("allows service-specific variables to override project variables", () => {
+		const serviceSpecificEnv = `
+		ENVIRONMENT=production
+		DATABASE_URL=\${{project.DATABASE_URL}}
+		`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceSpecificEnv,
+			projectEnv,
+		);
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=production", // Overrides project variable
+			"DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db",
+		]);
+	});
+
+	it("resolves complex references for dynamic endpoints", () => {
+		const projectEnv = `
+BASE_URL=https://api.example.com
+API_VERSION=v1
+PORT=8000
+`;
+		const serviceEnv = `
+API_ENDPOINT=\${{project.BASE_URL}}/\${{project.API_VERSION}}/endpoint
+SERVICE_PORT=9000
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"API_ENDPOINT=https://api.example.com/v1/endpoint",
+			"SERVICE_PORT=9000",
+		]);
+	});
+
+	it("handles missing project variables gracefully", () => {
+		const projectEnv = `
+PORT=8080
+`;
+		const serviceEnv = `
+MISSING_VAR=\${{project.MISSING_KEY}}
+SERVICE_PORT=3000
+`;
+
+		expect(() => prepareEnvironmentVariables(serviceEnv, projectEnv)).toThrow(
+			"Invalid project environment variable: project.MISSING_KEY",
+		);
+	});
+
+	it("overrides project variables with service-specific values", () => {
+		const projectEnv = `
+ENVIRONMENT=staging
+DATABASE_URL=postgres://project:project@localhost:5432/project_db
+`;
+		const serviceEnv = `
+ENVIRONMENT=\${{project.ENVIRONMENT}}
+DATABASE_URL=postgres://service:service@localhost:5432/service_db
+SERVICE_NAME=my-service
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=staging",
+			"DATABASE_URL=postgres://service:service@localhost:5432/service_db",
+			"SERVICE_NAME=my-service",
+		]);
+	});
+
+	it("handles project variables with normal and unusual characters", () => {
+		const projectEnv = `
+ENVIRONMENT=PRODUCTION
+`;
+
+		// Needs to be in quotes
+		const serviceEnv = `
+NODE_ENV=\${{project.ENVIRONMENT}}
+SPECIAL_VAR="$^@$^@#$^@!#$@#$-\${{project.ENVIRONMENT}}"
+`;
+
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=PRODUCTION",
+			"SPECIAL_VAR=$^@$^@#$^@!#$@#$-PRODUCTION",
+		]);
+	});
+
+	it("handles complex cases with multiple references, special characters, and spaces", () => {
+		const projectEnv = `
+ENVIRONMENT=STAGING
+APP_NAME=MyApp
+`;
+
+		const serviceEnv = `
+NODE_ENV=\${{project.ENVIRONMENT}}
+COMPLEX_VAR="Prefix-$#^!@-\${{project.ENVIRONMENT}}--\${{project.APP_NAME}} Suffix "
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=STAGING",
+			"COMPLEX_VAR=Prefix-$#^!@-STAGING--MyApp Suffix ",
+		]);
+	});
+
+	it("handles references enclosed in single quotes", () => {
+		const projectEnv = `
+	ENVIRONMENT=STAGING
+	APP_NAME=MyApp
+	`;
+
+		const serviceEnv = `
+	NODE_ENV='\${{project.ENVIRONMENT}}'
+	COMPLEX_VAR='Prefix-$#^!@-\${{project.ENVIRONMENT}}--\${{project.APP_NAME}} Suffix'
+	`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=STAGING",
+			"COMPLEX_VAR=Prefix-$#^!@-STAGING--MyApp Suffix",
+		]);
+	});
+
+	it("handles double and single quotes combined", () => {
+		const projectEnv = `
+ENVIRONMENT=PRODUCTION
+APP_NAME=MyApp
+`;
+		const serviceEnv = `
+NODE_ENV="'\${{project.ENVIRONMENT}}'"
+COMPLEX_VAR="'Prefix \"DoubleQuoted\" and \${{project.APP_NAME}}'"
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV='PRODUCTION'",
+			"COMPLEX_VAR='Prefix \"DoubleQuoted\" and MyApp'",
+		]);
+	});
+});

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

@@ -13,6 +13,14 @@ const baseApp: ApplicationNested = {
 	branch: null,
 	dockerBuildStage: "",
 	buildArgs: null,
+	project: {
+		env: "",
+		adminId: "",
+		name: "",
+		description: "",
+		createdAt: "",
+		projectId: "",
+	},
 	buildPath: "/",
 	gitlabPathNamespace: "",
 	buildType: "nixpacks",

apps/dokploy/components/dashboard/projects/add-env.tsx

@@ -0,0 +1,162 @@
+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 { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, FileIcon, SquarePen } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const updateProjectSchema = z.object({
+	env: z.string().optional(),
+});
+
+type UpdateProject = z.infer<typeof updateProjectSchema>;
+
+interface Props {
+	projectId: string;
+}
+
+export const AddEnv = ({ projectId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+	const { mutateAsync, error, isError, isLoading } =
+		api.project.update.useMutation();
+	const { data } = api.project.one.useQuery(
+		{
+			projectId,
+		},
+		{
+			enabled: !!projectId,
+		},
+	);
+
+	console.log(data);
+	const form = useForm<UpdateProject>({
+		defaultValues: {
+			env: data?.env ?? "",
+		},
+		resolver: zodResolver(updateProjectSchema),
+	});
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				env: data.env ?? "",
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: UpdateProject) => {
+		await mutateAsync({
+			env: formData.env || "",
+			projectId: projectId,
+		})
+			.then(() => {
+				toast.success("Project env updated succesfully");
+				utils.project.all.invalidate();
+			})
+			.catch(() => {
+				toast.error("Error to update the env");
+			})
+			.finally(() => {});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<FileIcon className="size-4" />
+					<span>Add Env</span>
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-6xl">
+				<DialogHeader>
+					<DialogTitle>Modify Shared Env</DialogTitle>
+					<DialogDescription>Update the env variables</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<AlertBlock type="info">
+					To use a shared env, in one of your services, you need to use like
+					this: Let's say you have a shared env ENVIROMENT="development" and you
+					want to use it in your service, you need to use like this:
+					<ul>
+						<li>
+							<code>ENVIRONMENT=${"${{shared.ENVIRONMENT}}"}</code>
+						</li>
+						<li>
+							<code>DATABASE_URL=${"${{shared.DATABASE_URL}}"}</code>
+						</li>
+					</ul>{" "}
+					This allows the service to inherit and use the shared variables from
+					the project level, ensuring consistency across services.
+				</AlertBlock>
+				<div className="grid gap-4">
+					<div className="grid items-center gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="grid w-full gap-4 "
+							>
+								<FormField
+									control={form.control}
+									name="env"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Enviroment variables</FormLabel>
+											<FormControl>
+												<CodeEditor
+													lineWrapping
+													language="properties"
+													wrapperClassName="h-[35rem] font-mono"
+													placeholder={`NODE_ENV=production
+PORT=3000
+
+                                                    `}
+													{...field}
+												/>
+											</FormControl>
+
+											<pre>
+												<FormMessage />
+											</pre>
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button isLoading={isLoading} type="submit">
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/projects/show.tsx

@@ -35,6 +35,7 @@ import {
 import Link from "next/link";
 import { Fragment } from "react";
 import { toast } from "sonner";
+import { AddEnv } from "./add-env";
 import { UpdateProject } from "./update";
 
 export const ShowProjects = () => {
@@ -190,7 +191,9 @@ export const ShowProjects = () => {
 														<DropdownMenuLabel className="font-normal">
 															Actions
 														</DropdownMenuLabel>
-
+														<div onClick={(e) => e.stopPropagation()}>
+															<AddEnv projectId={project.projectId} />
+														</div>
 														<div onClick={(e) => e.stopPropagation()}>
 															<UpdateProject projectId={project.projectId} />
 														</div>

apps/dokploy/drizzle/0043_closed_naoko.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "admin" ADD COLUMN "env" text DEFAULT '' NOT NULL;--> statement-breakpoint
+ALTER TABLE "project" ADD COLUMN "env" text DEFAULT '' NOT NULL;

apps/dokploy/drizzle/0044_sour_true_believers.sql

@@ -0,0 +1 @@
+ALTER TABLE "admin" DROP COLUMN IF EXISTS "env";

apps/dokploy/drizzle/meta/_journal.json

@@ -302,6 +302,20 @@
       "when": 1729984439862,
       "tag": "0042_fancy_havok",
       "breakpoints": true
+    },
+    {
+      "idx": 43,
+      "version": "6",
+      "when": 1731873965888,
+      "tag": "0043_closed_naoko",
+      "breakpoints": true
+    },
+    {
+      "idx": 44,
+      "version": "6",
+      "when": 1731875539532,
+      "tag": "0044_sour_true_believers",
+      "breakpoints": true
     }
   ]
 }