feat(env): load new env variable on update

[Slashgear]

Why

Close #1363

How

• Add new event type for preview app
• Handle new behaviour for onUpdate for getProcessEnv
• Handle filewatcher on .env file

Todo

• I still need to check that everything works correctly but I think this would do the job.
• Do we need to update documentation about env variable ?
• Do we need to add new tests on that ?

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #1363: Load new env variables if .env has changed

---

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
remotion	✅ Ready (Inspect)	Visit Preview	Oct 6, 2022 at 9:08AM (UTC)

[JonnyBurger]

The reload when the file changes is beautifully done! Very nice!
The main point of the PR does not yet work though - when opening the preview and entering process.env in the console, the old environment variables are still present.

Let me know if you have an idea on how to solve this, or if I should help come up with something!

[Slashgear]

So I need to flush the previous variable before reinjecting the new one.

• Run 1 variable A is defined
• User removes variable A and add a variable B
• Refresh of the preview app
• A is not defined anymore and B is defined

That what you mean ?

[JonnyBurger]

@Slashgear Yes, that would be the desired behavior! Since we currently don't make use of environment variables in Node.JS
during the preview but just in the browser, it needs to be re-injected into Webpack or added into a <script> tag when loading index.html, this would be a relatively simple solution actually.

Another possibility: We currently use DefinePlugin by Webpack, and I found a way to dynamically change the values: https://webpack.js.org/plugins/define-plugin/#runtime-values-via-runtimevalue We could add a dependency on the .env file.

[JonnyBurger]

My preferred solution would be if there is a refactor and the environment variables get added to index-html.ts instead of DefinePlugin() like we do for inputProps, since then we use the same pattern for both and we don't rely on Webpack in case we want to support more bundlers in the future.

[JonnyBurger]

Works super reliably and is very snappy! Thanks a lot for fixing the typo as well 🙌

[JonnyBurger]

Implemented the deluxe version and also added handling for adding / removing a .env file 😇