Learn how to use Angular environment variables with a custom Webpack configuration to dynamically configure your Angular app. With step-by-step instructions and code snippets, you'll be able to master this essential technique in no time.
This video will teach you how to create environmental variables using an angular custom webpack configuration.
The goal is to create the environment variables from the terminal (useful even for CI systems), and also use the .env file.
At first, you will see how to use the webpack's EnvironmentPlugin and then an improvement that replaces the EnvironmentPlugin with the DotEnvPlugin
✨ Chapters:
0:00 Intro
1:03 Understand process.env
4:27 Use process in Angular
5:26 Setup a custom webpack configuration
7:59 Using EnvironmentPlugin
10:42 Using DotEnvPlugin
15:14 Thank you
✨ Code: https://github.com/profanis/codeShotsWithProfanis/tree/45/environmental_variables_webpack
✨ Environment Plugin: https://webpack.js.org/plugins/environment-plugin/
✨ DotEnv Plugin: https://github.com/mrsteele/dotenv-webpack
