CODEWITHSUNDEEP
reactjswebpackhtml-webpack-plugin
Pramod S. Nikam
Pramod S. Nikam

Reputation: 4541

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

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?

Upvotes: 1

Views: 4713

Answers (2)

Dat Tran
Dat Tran

Reputation: 1586

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

Upvotes: 1

EMC
EMC

Reputation: 1930

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>

Upvotes: 0

Related Questions