How do you reference a process.env variable in HTML <script src="" ? React

If you're already using create-react-app, this is already available by updating to

<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_API_KEY%"></script>

as it says in the docs

You can also access the environment variables starting with REACT_APP_ in the public/index.html.

The simple way you can use

in HTML

<p>%NODE_ENV%</p>

and in script

<script>
if('%NODE_ENV%' === 'production') {
.... some code
}
</script>

Solution

You can't reference the process.env variable directly inside html.

Create your own template from index.html and replace the api url with a parameter.

HtmlWebpackPlugin

Simplifies creation of HTML files to serve your webpack bundles.

You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.

Webpack.config.js

HtmlWebpackPlugin allows you to create and pass parameters to your template:

   const api_key = process.env.api_key;
   const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: 'index.js',
      plugins: [
        new HtmlWebpackPlugin({
          inject: false,
          template: './template.html',

          // Pass the full url with the key!
          apiUrl: `https://maps.googleapis.com/maps/api/js?key=${api_key}`,

        });
      ]
    }

template.html

Inside the template you can access to the parameter:

<script src="<%= htmlWebpackPlugin.options.apiUrl %>"></script>

See: Writing Your Own Templates

Notes

This is a modified answer from this comment, please read the full conversation.

I put the following code in componentWillMount where the map renders and it worked (at least in development: const API_KEY = process.env.GOOGLEMAP_API_KEY; const script = document.createElement('script'); script.src = https://maps.googleapis.com/maps/api/js?key=${API_KEY}; document.head.append(script);

I was able to get this to work using the code posted by bigmugcup in the comments above. I did not modify the webpack.config.js file.