feat(env): load new env variable on update

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

@@ -22,10 +22,26 @@ 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(`Updated env file ${envFile}.`);
+			} catch (err) {
+				Log.error(
+					`${envFile} update fails with error ${err}`
+				);
+			}
+		});
 		return {
 			...processEnv,
 			...dotenv.parse(envFileData),
@@ -37,7 +53,7 @@ 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.ts

@@ -60,7 +60,15 @@ 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'),