Environment variables in Typescript with Webpack

Question

I am having trouble declaring globals in Typescript, using Webpack's DefinePlugin. I was hoping to get some input on what I am doing wrong.

I created an environment variable in my .bash_profile:

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx

In my webpack.config.js, I have the following lines:

...
plugins: [
  new webpack.DefinePlugin({
    API_KEY_GOOGLE_MAPS: JSON.stringify(process.env.API_KEY_GOOGLE_MAPS),
  }),
],
...

Inside index.tsx (I am using React), I do the following:

declare var API_KEY_GOOGLE_MAPS: string;

console.log(API_KEY_GOOGLE_MAPS)

This produces the following error, at the line containing console.log:

ReferenceError: API_KEY_GOOGLE_MAPS is not defined

Does anybody have any leads?

Solution 1

create-react-app environment variables should be prefixed with REACT_APP_:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

from the "Adding Custom Environment Variables" documentation.

You should be adding these environment variables to your .env file(s) in place of adding these to your .bash_profile file. The appropriate file will be picked up depending on the build (i.e. start or build), and the application will be easier to share and deploy.

Solution 2

The way I do it is to have a .env file(add it to .gitignore) in the root of my project files.

Within that file I define my project environment variables(additional variables can be separated by adding each to it's own line):

NODE_ENV=development

Then using the dotenv npm module I can access the values in any webpack file(or server side expressJS file for example).

// in the command line
$ npm install --save dotenv

// at the top of the webpack config file
require('dotenv').config();

// in the plugins of the webpack config
plugins: [
    new webpack.DefinePlugin({
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
],

Now I can reference it within my app being transpiled by webpack:

console.log(NODE_ENV); // development

Solution 3

The other answers require create-react-app so I will offer mine.

First, add the plugin to your Webpack configuration:

const webpack = require("webpack");

module.exports = {
  // ... 
  plugins: [
    new webpack.DefinePlugin({
      MY_ENV_VAR: JSON.stringify(true),
    }),
  ],
};

Next, declare the variable in TypeScript:

declare var MY_ENV_VAR : string | undefined;

Finally, you can access the variable in your code:

console.log(MY_ENV_VAR);

Comments

[bbalan]

Thank you - I modified my solution to incorporate your feedback and that from Akyuna Akish.

[goldins]

It might be worth noting that .env files should be used for prod/sand/etc (e.g. .env.prod). builds as well and should not be added to .gitignore, only .env or .env.local files should be git-ignored.

[Akyuna Akish]

I could see that, I usually deploy to Heroku which allows you to configure environment variables via the command line without a .env.prod file. Though with other hosting services I could see a .env.prod file coming in handy.

[gorn]

webpack is not defined, can be handled by adding const webpack = require('webpack') at the top of the webpack config file. However, NODE_ENV is still undefined in my app (TS2304: Cannot find name 'NODE_ENV'.)