DEV Community

Cover image for Angular Universal ENV Variables with Webpack and Dotenv
Jonathan Gamble
Jonathan Gamble

Posted on • Edited on

Angular Universal ENV Variables with Webpack and Dotenv

In the last week for some reason, my Vercel Hack stopped working. The variables were not importing as expected.

In case this does not work for you, here is the webpack version. I wonder if using webpack actually slows down the build process or not? Should it be avoided? Comment if you know please. I am thinking you should avoid any external dependencies when possible, but this makes using process.env seemless.

Here are instructions with Angular Universal. I had to compile different results on Google, as I tried to simplify things that others seem to over complicate --- as usual. ( ͡° ͜ʖ ͡°)

Install Dependencies

npm i -D @angular-builders/custom-webpack
npm i -D @angular-builders/dev-server
npm i -D dotenv
Enter fullscreen mode Exit fullscreen mode

Create custom-webpack.config.ts

Always use Typescript! This should be a rule for all JS developer companies. Put this in your root directory.

import { EnvironmentPlugin } from 'webpack';
import { config } from 'dotenv';

config();

module.exports = {
  plugins: [
    new EnvironmentPlugin([
      'FIREBASE_API_DEV',
      'FIREBASE_API_PROD'
    ])
  ]
}
Enter fullscreen mode Exit fullscreen mode

Of course I am using a Firebase example here, as you can import it as a JSON file.

Edit Environment Files

environment.prod.ts

export const environment = {
  production: true,
  firebase: JSON.parse(process.env.FIREBASE_API_PROD as string)
};
Enter fullscreen mode Exit fullscreen mode

If you are just importing a string, you don't need JSON.parse() here. Do the same for all environment version files.

Edit Angular.json

Replace projects.architect.build.builder:
From:

@angular-devkit/build-angular:browser
Enter fullscreen mode Exit fullscreen mode

To:

@angular-builders/custom-webpack:browser
Enter fullscreen mode Exit fullscreen mode

Replace projects.architect.serve.builder:
From:

@angular-devkit/build-angular:dev-server
Enter fullscreen mode Exit fullscreen mode

To:

@angular-builders/custom-webpack:dev-server
Enter fullscreen mode Exit fullscreen mode

Replace projects.architect.test.builder:
From:

@angular-devkit/build-angular:karma
Enter fullscreen mode Exit fullscreen mode

To:

@angular-builders/custom-webpack:karma
Enter fullscreen mode Exit fullscreen mode

Replace projects.architect.server.builder:
From:

@angular-devkit/build-angular:server
Enter fullscreen mode Exit fullscreen mode

To:

@angular-builders/custom-webpack:server
Enter fullscreen mode Exit fullscreen mode

Add to:
projects.architect.server.options
projects.architect.build.options
projects.architect.test.options

"customWebpackConfig": {
  "path": "./custom-webpack.config.ts"
},
Enter fullscreen mode Exit fullscreen mode

Create Your .env File

Put your variables in your .env file as usual:

FIREBASE_API_DEV={"apiKey":"..." ...}
FIREBASE_API_PROD={...}
Enter fullscreen mode Exit fullscreen mode

And done. Here is my repository if you need an example.

NOTE: Remember to add .env to your .gitignore file.

J

Top comments (0)