Skip to content

Commit

Permalink
Make all react app vars accessible in index.html (facebook#1440)
Browse files Browse the repository at this point in the history
* Make all vars accessiable in index.html

* Fix wrong env provieded to DefinePlugin

* Separate results from getClientEnvironment

* The `string` should be object instead of string

* Fix accessing wrong field

* Changed variables naming to `raw` and `stringified`

* Remove trailing commas
  • Loading branch information
jihchi authored and Timer committed Feb 10, 2017
1 parent 061f711 commit caaeacb
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 18 deletions.
22 changes: 15 additions & 7 deletions config/env.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,33 @@
var REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
var processEnv = Object
var raw = Object
.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce((env, key) => {
env[key] = JSON.stringify(process.env[key]);
env[key] = process.env[key];
return env;
}, {
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
'NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development'
),
'NODE_ENV': process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
'PUBLIC_URL': JSON.stringify(publicUrl)
'PUBLIC_URL': publicUrl
});
return {'process.env': processEnv};
// Stringify all values so we can feed into Webpack DefinePlugin
var stringified = {
'process.env': Object
.keys(raw)
.reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {})
};

return { raw, stringified };
}

module.exports = getClientEnvironment;
9 changes: 4 additions & 5 deletions config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -198,20 +198,19 @@ module.exports = {
];
},
plugins: [
// Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
}),
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env),
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
Expand Down
11 changes: 5 additions & 6 deletions config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ var env = getClientEnvironment(publicUrl);

// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (env['process.env'].NODE_ENV !== '"production"') {
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.');
}

Expand Down Expand Up @@ -212,13 +212,12 @@ module.exports = {
];
},
plugins: [
// Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
}),
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
Expand All @@ -240,7 +239,7 @@ module.exports = {
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env),
new webpack.DefinePlugin(env.stringified),
// This helps ensure the builds are consistent if source hasn't changed:
new webpack.optimize.OccurrenceOrderPlugin(),
// Try to dedupe duplicated modules, if any:
Expand Down

0 comments on commit caaeacb

Please sign in to comment.