How to read system environment variable in index.html using webpack

Question

strong textWebpack configuration is as follows :

webpack.config.js is as follows:

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        app: './app.js',
    },
    plugins: [
        new CopyWebpackPlugin([
            {from: '../public'},
            {from: '../src/fonts', to: 'fonts'},
            {from: '../src/images'}
        ]),
        new webpack.EnvironmentPlugin(['REACT_APP_OMNITURE_URL']),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.UglifyJsPlugin()
    ],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader',
                    options: {presets: ["es2015", "react"]},
                }],
            },
            {
                test: /\.svg$/,
                exclude: [/node_modules/],
                use: [{loader: 'svg-react-loader'}],
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
            },
            {
                test: /\.(png|woff|woff2|eot|otf|ttf)$/,
                loader: 'url-loader?limit=100000'
            }
        ],
    },
    devServer: {
        contentBase: path.resolve(__dirname, './public'),
        disableHostCheck: true,
        historyApiFallback: true
    },
};

What I need to achieve is to read this REACT_APP_OMNITURE_URLenvironmental variable in index.html as follows:

<script type="text/javascript" src="//%REACT_APP_OMNITURE_URL%/analytics.js"></script>

Any help on this front?

Plus we are using Bamboo to dynamically pass us per environment variables. How can we assign those variables to node variables and Use in plugin?

Dat Tran · Accepted Answer · 2018-08-03 07:17:11Z

1

You can use interpolate-html-plugin

yarn add interpolate-html-plugin --dev

webpack.config.js

plugins: [
    new InterpolateHtmlPlugin({
      'REACT_APP_OMNITURE_URL': process.env.REACT_APP_OMNITURE_URL
    })
]

Then in the html file, you can use it.

index.html

<script type="text/javascript" src="//%REACT_APP_OMNITURE_URL%/analytics.js"></script>

More info can be found here: https://www.npmjs.com/package/interpolate-html-plugin

edited Aug 3, 2018 at 7:17

answered Aug 3, 2018 at 7:00

Dat Tran

1,5961 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EMC · Accepted Answer · 2018-08-03 06:03:32Z

0

Have you tried html-webpack-plugin? It's worked for me adding script paths. From the docs:

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}
This will generate a file dist/index.html containing the following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

answered Aug 3, 2018 at 6:03

EMC

1,9602 gold badges23 silver badges38 bronze badges

2 Comments

Pramod S. Nikam Over a year ago

but How will System Environment Variables are picked up in html? via env json parameter?

Pramod S. Nikam Over a year ago

Plus we are using Bamboo ( this is basically CI/CD pipeline ) to dynamically pass us per environment variables. How can we assign those variables to node variables and Use in plugin?

Collectives™ on Stack Overflow

How to read system environment variable in index.html using webpack

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related