feat(env): load new env variable on update

packages/bundler/src/index-html.ts

@@ -4,6 +4,7 @@ export const indexHtml = ({
 	baseDir,
 	editorName,
 	inputProps,
+	envVariables,
 	staticHash,
 	remotionRoot,
 	previewServerCommand,
@@ -12,6 +13,7 @@ export const indexHtml = ({
 	baseDir: string;
 	editorName: string | null;
 	inputProps: object | null;
+	envVariables?: Record<string, string>;
 	remotionRoot: string;
 	previewServerCommand: string | null;
 }) =>
@@ -49,6 +51,14 @@ export const indexHtml = ({
 			`
 				: ''
 		}
+		${
+			envVariables
+				? `<script> window.process = {
+    						env: ${JSON.stringify(envVariables)}
+ 				};</script>
+			`
+				: ''
+		}
 
 		<div id="container"></div>
 		<div id="menuportal-0"></div>

packages/cli/src/event-source-events.ts

@@ -5,4 +5,8 @@ export type EventSourceEvent =
 	  }
 	| {
 			type: 'init';
-	  };
+	  }
+    | {
+	        type: 'new-env-variables';
+			newEnvVariables: Record<string, string>;
+      };

packages/cli/src/event-source.ts

@@ -8,7 +8,7 @@ export const openEventSource = () => {
 
 	source.addEventListener('message', (event) => {
 		const newEvent = JSON.parse(event.data) as EventSourceEvent;
-		if (newEvent.type === 'new-input-props') {
+		if (newEvent.type === 'new-input-props' || newEvent.type === 'new-env-variables') {
 			window.location.reload();
 		}
 	});

packages/cli/src/get-cli-options.ts

@@ -257,7 +257,7 @@ export const getCliOptions = async (options: {
 		shouldOutputImageSequence,
 		codec,
 		inputProps: getInputProps(() => undefined),
-		envVariables: await getEnvironmentVariables(),
+		envVariables: await getEnvironmentVariables(() => undefined),
 		quality: ConfigInternals.getQuality(),
 		browser: await getAndValidateBrowser(browserExecutable),
 		crf,

packages/cli/src/get-env.ts

@@ -1,6 +1,7 @@
 import dotenv from 'dotenv';
 import fs from 'fs';
 import path from 'path';
+import {chalk} from './chalk';
 import {ConfigInternals} from './config';
 import {findRemotionRoot} from './find-closest-package-json';
 import {Log} from './log';
@@ -22,10 +23,23 @@ function getProcessEnv(): Record<string, string> {
 
 const getEnvForEnvFile = async (
 	processEnv: ReturnType<typeof getProcessEnv>,
-	envFile: string
+	envFile: string,
+	onUpdate: (newProps: Record<string, string>) => void
 ) => {
 	try {
 		const envFileData = await fs.promises.readFile(envFile);
+		fs.watchFile(envFile, {interval: 100}, async () => {
+			try {
+				const file = await fs.promises.readFile(envFile, 'utf-8');
+				onUpdate({
+					...processEnv,
+					...dotenv.parse(file),
+				});
+				Log.info(chalk.blueBright(`Updated env file ${envFile}`));
+			} catch (err) {
+				Log.error(`${envFile} update fails with error ${err}`);
+			}
+		});
 		return {
 			...processEnv,
 			...dotenv.parse(envFileData),
@@ -37,7 +51,9 @@ const getEnvForEnvFile = async (
 	}
 };
 
-export const getEnvironmentVariables = (): Promise<Record<string, string>> => {
+export const getEnvironmentVariables = (
+	onUpdate: (newProps: Record<string, string>) => void
+): Promise<Record<string, string>> => {
 	const processEnv = getProcessEnv();
 
 	if (parsedCli['env-file']) {
@@ -49,7 +65,7 @@ export const getEnvironmentVariables = (): Promise<Record<string, string>> => {
 			process.exit(1);
 		}
 
-		return getEnvForEnvFile(processEnv, envFile);
+		return getEnvForEnvFile(processEnv, envFile, onUpdate);
 	}
 
 	const remotionRoot = findRemotionRoot();
@@ -59,20 +75,20 @@ export const getEnvironmentVariables = (): Promise<Record<string, string>> => {
 		const envFile = path.resolve(remotionRoot, configFileSetting);
 		if (!fs.existsSync(envFile)) {
 			Log.error(
-				'You specifed a custom .env file using `Config.Rendering.setDotEnvLocation()` in the config file but it could not be found'
+				'You specified a custom .env file using `Config.Rendering.setDotEnvLocation()` in the config file but it could not be found'
 			);
 			Log.error('We looked for the file at:', envFile);
 			Log.error('Check that your path is correct and try again.');
 			process.exit(1);
 		}
 
-		return getEnvForEnvFile(processEnv, envFile);
+		return getEnvForEnvFile(processEnv, envFile, onUpdate);
 	}
 
 	const defaultEnvFile = path.resolve(remotionRoot, '.env');
 	if (!fs.existsSync(defaultEnvFile)) {
 		return Promise.resolve(processEnv);
 	}
 
-	return getEnvForEnvFile(processEnv, defaultEnvFile);
+	return getEnvForEnvFile(processEnv, defaultEnvFile, onUpdate);
 };

packages/cli/src/preview-server/routes.ts

@@ -41,11 +41,13 @@ const handleFallback = async ({
 	hash,
 	response,
 	getCurrentInputProps,
+	getEnvVariables,
 }: {
 	remotionRoot: string;
 	hash: string;
 	response: ServerResponse;
 	getCurrentInputProps: () => object;
+	getEnvVariables: () => Record<string, string>;
 }) => {
 	const [edit] = await editorGuess;
 	const displayName = getDisplayNameForEditor(edit ? edit.command : null);
@@ -58,6 +60,7 @@ const handleFallback = async ({
 			staticHash: hash,
 			baseDir: '/',
 			editorName: displayName,
+			envVariables: getEnvVariables(),
 			inputProps: getCurrentInputProps(),
 			remotionRoot,
 			previewServerCommand:
@@ -184,6 +187,7 @@ export const handleRoutes = ({
 	response,
 	liveEventsServer,
 	getCurrentInputProps,
+	getEnvVariables,
 	remotionRoot,
 	userPassedPublicDir,
 }: {
@@ -193,6 +197,7 @@ export const handleRoutes = ({
 	response: ServerResponse;
 	liveEventsServer: LiveEventsServer;
 	getCurrentInputProps: () => object;
+	getEnvVariables: () => Record<string, string>;
 	remotionRoot: string;
 	userPassedPublicDir: string | null;
 }) => {
@@ -243,5 +248,6 @@ export const handleRoutes = ({
 		hash,
 		response,
 		getCurrentInputProps,
+		getEnvVariables,
 	});
 };

packages/cli/src/preview-server/start-server.ts

@@ -21,7 +21,7 @@ export const startServer = async (
 	options: {
 		webpackOverride: WebpackOverrideFn;
 		getCurrentInputProps: () => object;
-		envVariables?: Record<string, string>;
+		getEnvVariables: () => Record<string, string>;
 		port: number | null;
 		maxTimelineTracks?: number;
 		remotionRoot: string;
@@ -43,7 +43,7 @@ export const startServer = async (
 		environment: 'development',
 		webpackOverride:
 			options?.webpackOverride ?? ConfigInternals.getWebpackOverrideFn(),
-		envVariables: options?.envVariables ?? {},
+		envVariables: options?.getEnvVariables() ?? {},
 		maxTimelineTracks: options?.maxTimelineTracks ?? 15,
 		entryPoints: [
 			require.resolve('./hot-middleware/client'),
@@ -84,6 +84,7 @@ export const startServer = async (
 					response,
 					liveEventsServer,
 					getCurrentInputProps: options.getCurrentInputProps,
+					getEnvVariables: options.getEnvVariables,
 					remotionRoot: options.remotionRoot,
 					userPassedPublicDir: options.userPassedPublicDir,
 				});

packages/cli/src/preview.ts

@@ -57,14 +57,22 @@ export const previewCommand = async (remotionRoot: string) => {
 			});
 		});
 	});
-	const envVariables = await getEnvironmentVariables();
+	let envVariables = await getEnvironmentVariables((newEnvVariables) => {
+		waitForLiveEventsListener().then((listener) => {
+			envVariables = newEnvVariables;
+			listener.sendEventToClient({
+				type: 'new-env-variables',
+				newEnvVariables,
+			});
+		});
+	});
 
 	const {port, liveEventsServer} = await startServer(
 		path.resolve(__dirname, 'previewEntry.js'),
 		fullPath,
 		{
 			getCurrentInputProps: () => inputProps,
-			envVariables,
+			getEnvVariables: () => envVariables,
 			port: desiredPort,
 			maxTimelineTracks: ConfigInternals.getMaxTimelineTracks(),
 			remotionRoot,