Webpack process.env vars in React
0
In Browserify / Gulp world, I used to use envify to 'fill in' the process.env vars in the React code. How does one achieve this in the Webpack world?
Looking at this doc
https://webpack.js.org/plugins/environment-plugin/#src/components/Sidebar/Sidebar.jsx
I'm setting up..
plugins: [
new HtmlWebpackPlugin(
template: 'views/index.handlebars',
filename: 'views/index.handlebars'
),
new MiniCssExtractPlugin(
filename: '[name].css',
),
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery'
),
new webpack.SourceMapDevToolPlugin(
filename: '[name].js.map',
),
new webpack.HotModuleReplacementPlugin(),
new webpack.EnvironmentPlugin(['HEROKU', 'HEROKU_PREFIX', 'LANG', 'NODE_ENV'])
]
in my webpack config.
The process.env vars are still not being 'filled in'
webpack
asked Nov 14 '18 at 23:19
GN.GN.
83511744
add a comment |
0
In Browserify / Gulp world, I used to use envify to 'fill in' the process.env vars in the React code. How does one achieve this in the Webpack world?
Looking at this doc
https://webpack.js.org/plugins/environment-plugin/#src/components/Sidebar/Sidebar.jsx
I'm setting up..
plugins: [
new HtmlWebpackPlugin(
template: 'views/index.handlebars',
filename: 'views/index.handlebars'
),
new MiniCssExtractPlugin(
filename: '[name].css',
),
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery'
),
new webpack.SourceMapDevToolPlugin(
filename: '[name].js.map',
),
new webpack.HotModuleReplacementPlugin(),
new webpack.EnvironmentPlugin(['HEROKU', 'HEROKU_PREFIX', 'LANG', 'NODE_ENV'])
]
in my webpack config.
The process.env vars are still not being 'filled in'
webpack
asked Nov 14 '18 at 23:19
GN.GN.
83511744
add a comment |
0
0
0
In Browserify / Gulp world, I used to use envify to 'fill in' the process.env vars in the React code. How does one achieve this in the Webpack world?
Looking at this doc
https://webpack.js.org/plugins/environment-plugin/#src/components/Sidebar/Sidebar.jsx
I'm setting up..
plugins: [
new HtmlWebpackPlugin(
template: 'views/index.handlebars',
filename: 'views/index.handlebars'
),
new MiniCssExtractPlugin(
filename: '[name].css',
),
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery'
),
new webpack.SourceMapDevToolPlugin(
filename: '[name].js.map',
),
new webpack.HotModuleReplacementPlugin(),
new webpack.EnvironmentPlugin(['HEROKU', 'HEROKU_PREFIX', 'LANG', 'NODE_ENV'])
]
in my webpack config.
The process.env vars are still not being 'filled in'
webpack
asked Nov 14 '18 at 23:19
GN.GN.
83511744
In Browserify / Gulp world, I used to use envify to 'fill in' the process.env vars in the React code. How does one achieve this in the Webpack world?
Looking at this doc
https://webpack.js.org/plugins/environment-plugin/#src/components/Sidebar/Sidebar.jsx
I'm setting up..
plugins: [
new HtmlWebpackPlugin(
template: 'views/index.handlebars',
filename: 'views/index.handlebars'
),
new MiniCssExtractPlugin(
filename: '[name].css',
),
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery'
),
new webpack.SourceMapDevToolPlugin(
filename: '[name].js.map',
),
new webpack.HotModuleReplacementPlugin(),
new webpack.EnvironmentPlugin(['HEROKU', 'HEROKU_PREFIX', 'LANG', 'NODE_ENV'])
]
in my webpack config.
The process.env vars are still not being 'filled in'
webpack
webpack
asked Nov 14 '18 at 23:19
GN.GN.
83511744
asked Nov 14 '18 at 23:19
GN.GN.
83511744
asked Nov 14 '18 at 23:19
GN.GN.
83511744
asked Nov 14 '18 at 23:19
GN.GN.
83511744
asked Nov 14 '18 at 23:19
GN.GN.
83511744
83511744
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
Try passing an object instead:
plugins: [
...
new webpack.EnvironmentPlugin(
'HEROKU': 'Heroku',
'HEROKU_PREFIX': 'Prefix_',
'LANG': 'English',
'NODE_ENV': 'development'
)
]
I hope it helps.
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
The values in your example are hardcoded though. Trying to pick them up from .env file. I'm following the Webpack examples, but no suprise — Webpack is not working.
– GN.
Nov 20 '18 at 20:13
You are using an array in your code sample. Did you try passing the values as an object? like new webpack.EnvironmentPlugin( .. )
– xeiton
Nov 26 '18 at 17:07
add a comment |
0
If you don't mind to install the lib dotenv (just to build your project). It loads your .env file and after that, you can generate an object with all the data and set in 'process.env' variable through the DefinePlugin.
const dotenv = require('dotenv');
let env;
// load your .env file
const getEnv = () =>
if (!env)
env = dotenv.config( path: `$process.cwd()/config/dev.env`).parsed;
return env;
;
// generate an object with all env variables
const envKeys = Object.keys(getEnv()).reduce((prev, next) =>
prev[`$next`] = JSON.stringify(getEnv()[next]);
return prev;
, 'NODE_ENV': JSON.stringify('development'));
//webpack conf
module.exports =
...
plugins: [
// apply all your env var to process.env variable
new webpack.DefinePlugin(
'process.env': envKeys
),
],
answered Jan 23 at 15:17
aquilesbaquilesb
36115
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310224%2fwebpack-process-env-vars-in-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try passing an object instead:
plugins: [
...
new webpack.EnvironmentPlugin(
'HEROKU': 'Heroku',
'HEROKU_PREFIX': 'Prefix_',
'LANG': 'English',
'NODE_ENV': 'development'
)
]
I hope it helps.
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
The values in your example are hardcoded though. Trying to pick them up from .env file. I'm following the Webpack examples, but no suprise — Webpack is not working.
– GN.
Nov 20 '18 at 20:13
You are using an array in your code sample. Did you try passing the values as an object? like new webpack.EnvironmentPlugin( .. )
– xeiton
Nov 26 '18 at 17:07
add a comment |
0
Try passing an object instead:
plugins: [
...
new webpack.EnvironmentPlugin(
'HEROKU': 'Heroku',
'HEROKU_PREFIX': 'Prefix_',
'LANG': 'English',
'NODE_ENV': 'development'
)
]
I hope it helps.
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
The values in your example are hardcoded though. Trying to pick them up from .env file. I'm following the Webpack examples, but no suprise — Webpack is not working.
– GN.
Nov 20 '18 at 20:13
You are using an array in your code sample. Did you try passing the values as an object? like new webpack.EnvironmentPlugin( .. )
– xeiton
Nov 26 '18 at 17:07
add a comment |
0
0
0
Try passing an object instead:
plugins: [
...
new webpack.EnvironmentPlugin(
'HEROKU': 'Heroku',
'HEROKU_PREFIX': 'Prefix_',
'LANG': 'English',
'NODE_ENV': 'development'
)
]
I hope it helps.
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
Try passing an object instead:
plugins: [
...
new webpack.EnvironmentPlugin(
'HEROKU': 'Heroku',
'HEROKU_PREFIX': 'Prefix_',
'LANG': 'English',
'NODE_ENV': 'development'
)
]
I hope it helps.
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
answered Nov 15 '18 at 4:30
xeitonxeiton
2866
2866
The values in your example are hardcoded though. Trying to pick them up from .env file. I'm following the Webpack examples, but no suprise — Webpack is not working.
– GN.
Nov 20 '18 at 20:13
You are using an array in your code sample. Did you try passing the values as an object? like new webpack.EnvironmentPlugin( .. )
– xeiton
Nov 26 '18 at 17:07
add a comment |
The values in your example are hardcoded though. Trying to pick them up from .env file. I'm following the Webpack examples, but no suprise — Webpack is not working.
– GN.
Nov 20 '18 at 20:13
You are using an array in your code sample. Did you try passing the values as an object? like new webpack.EnvironmentPlugin( .. )
– xeiton
Nov 26 '18 at 17:07
The values in your example are hardcoded though. Trying to pick them up from .env file. I'm following the Webpack examples, but no suprise — Webpack is not working.
– GN.
Nov 20 '18 at 20:13
The values in your example are hardcoded though. Trying to pick them up from .env file. I'm following the Webpack examples, but no suprise — Webpack is not working.
– GN.
Nov 20 '18 at 20:13
You are using an array in your code sample. Did you try passing the values as an object? like new webpack.EnvironmentPlugin( .. )
– xeiton
Nov 26 '18 at 17:07
You are using an array in your code sample. Did you try passing the values as an object? like new webpack.EnvironmentPlugin( .. )
– xeiton
Nov 26 '18 at 17:07
add a comment |
0
If you don't mind to install the lib dotenv (just to build your project). It loads your .env file and after that, you can generate an object with all the data and set in 'process.env' variable through the DefinePlugin.
const dotenv = require('dotenv');
let env;
// load your .env file
const getEnv = () =>
if (!env)
env = dotenv.config( path: `$process.cwd()/config/dev.env`).parsed;
return env;
;
// generate an object with all env variables
const envKeys = Object.keys(getEnv()).reduce((prev, next) =>
prev[`$next`] = JSON.stringify(getEnv()[next]);
return prev;
, 'NODE_ENV': JSON.stringify('development'));
//webpack conf
module.exports =
...
plugins: [
// apply all your env var to process.env variable
new webpack.DefinePlugin(
'process.env': envKeys
),
],
answered Jan 23 at 15:17
aquilesbaquilesb
36115
add a comment |
0
If you don't mind to install the lib dotenv (just to build your project). It loads your .env file and after that, you can generate an object with all the data and set in 'process.env' variable through the DefinePlugin.
const dotenv = require('dotenv');
let env;
// load your .env file
const getEnv = () =>
if (!env)
env = dotenv.config( path: `$process.cwd()/config/dev.env`).parsed;
return env;
;
// generate an object with all env variables
const envKeys = Object.keys(getEnv()).reduce((prev, next) =>
prev[`$next`] = JSON.stringify(getEnv()[next]);
return prev;
, 'NODE_ENV': JSON.stringify('development'));
//webpack conf
module.exports =
...
plugins: [
// apply all your env var to process.env variable
new webpack.DefinePlugin(
'process.env': envKeys
),
],
answered Jan 23 at 15:17
aquilesbaquilesb
36115
add a comment |
0
0
0
If you don't mind to install the lib dotenv (just to build your project). It loads your .env file and after that, you can generate an object with all the data and set in 'process.env' variable through the DefinePlugin.
const dotenv = require('dotenv');
let env;
// load your .env file
const getEnv = () =>
if (!env)
env = dotenv.config( path: `$process.cwd()/config/dev.env`).parsed;
return env;
;
// generate an object with all env variables
const envKeys = Object.keys(getEnv()).reduce((prev, next) =>
prev[`$next`] = JSON.stringify(getEnv()[next]);
return prev;
, 'NODE_ENV': JSON.stringify('development'));
//webpack conf
module.exports =
...
plugins: [
// apply all your env var to process.env variable
new webpack.DefinePlugin(
'process.env': envKeys
),
],
answered Jan 23 at 15:17
aquilesbaquilesb
36115
If you don't mind to install the lib dotenv (just to build your project). It loads your .env file and after that, you can generate an object with all the data and set in 'process.env' variable through the DefinePlugin.
const dotenv = require('dotenv');
let env;
// load your .env file
const getEnv = () =>
if (!env)
env = dotenv.config( path: `$process.cwd()/config/dev.env`).parsed;
return env;
;
// generate an object with all env variables
const envKeys = Object.keys(getEnv()).reduce((prev, next) =>
prev[`$next`] = JSON.stringify(getEnv()[next]);
return prev;
, 'NODE_ENV': JSON.stringify('development'));
//webpack conf
module.exports =
...
plugins: [
// apply all your env var to process.env variable
new webpack.DefinePlugin(
'process.env': envKeys
),
],
const dotenv = require('dotenv');
let env;
// load your .env file
const getEnv = () =>
if (!env)
env = dotenv.config( path: `$process.cwd()/config/dev.env`).parsed;
return env;
;
// generate an object with all env variables
const envKeys = Object.keys(getEnv()).reduce((prev, next) =>
prev[`$next`] = JSON.stringify(getEnv()[next]);
return prev;
, 'NODE_ENV': JSON.stringify('development'));
//webpack conf
module.exports =
...
plugins: [
// apply all your env var to process.env variable
new webpack.DefinePlugin(
'process.env': envKeys
),
],
const dotenv = require('dotenv');
let env;
// load your .env file
const getEnv = () =>
if (!env)
env = dotenv.config( path: `$process.cwd()/config/dev.env`).parsed;
return env;
;
// generate an object with all env variables
const envKeys = Object.keys(getEnv()).reduce((prev, next) =>
prev[`$next`] = JSON.stringify(getEnv()[next]);
return prev;
, 'NODE_ENV': JSON.stringify('development'));
//webpack conf
module.exports =
...
plugins: [
// apply all your env var to process.env variable
new webpack.DefinePlugin(
'process.env': envKeys
),
],
answered Jan 23 at 15:17
aquilesbaquilesb
36115
answered Jan 23 at 15:17
aquilesbaquilesb
36115
answered Jan 23 at 15:17
aquilesbaquilesb
36115
answered Jan 23 at 15:17
aquilesbaquilesb
36115
36115
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310224%2fwebpack-process-env-vars-in-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
