Comments (11)
Hi! The ability to set default values has been added to the web preset in #983, which will be in the upcoming Neutrino 9.
In the meantime (or for presets that don't inherit from web, so don't have the built-in env
preset option), you can use the Neutrino API to add EnvironmentPlugin
:
const { EnvironmentPlugin } = require('webpack');
module.exports = {
use: [
['<existing preset name>', {
// Options
}],
(neutrino) => {
neutrino.config
.plugin('env')
.use(EnvironmentPlugin, [{
MY_VAR: 'default-value',
}]);
}
]
};
from neutrino.
You could do this with DefinePlugin:
const globals = {
__REACT_APP_FOO__: process.env.REACT_APP_FOO
__REACT_APP_BAR__: process.env.REACT_APP_BAR
};
module.exports = ({ config }) => {
config.plugin('globals')
.use(webpack.DefinePlugin, globals);
});
If you use ESLint you'll also have to add them to the globals there. The snippet below is not entirely correct as they will be defined as writable but I don't know the correct way of doing it due to differences between the eslintrc and ES CLI syntax. One expects an array while the other wants an object, but any attempt at setting writable to false
has failed. I think @eliperelman might have a bit more knowledge on this subject :)
config.module.rule('lint')
.loader('eslint', props => merge(props, {
options: {
globals: Object.keys(globals)
}
}));
from neutrino.
Rereading your question, I think webpack.EnvironmentPlugin might be better suited to that.
In your case, assuming the environment variables get set during the CI process, you can pass them to your code like this:
config
.plugin('env')
.use(webpack.EnvironmentPlugin, ['REACT_APP_FOO', 'REACT_APP_BAR']);
After which you have them available in code as process.env.REACT_APP_FOO
and process.env.REACT_APP_BAR
.
However, EnvironmentPlugin is already being used to inject NODE_ENV, so it will have to be merged with the existing arguments, which you can do like this (pulled from webpack-chain docs):
config
.plugin('env')
.inject((Plugin, args) => new Plugin([...args, 'REACT_APP_FOO', 'REACT_APP_BAR']));
from neutrino.
thanks for the help @pleunv! the goal is to have the environment variables read from hidden, uncommitted files files during the execution of the start
or build
scripts if possible, but the technique you suggested looks great for different requirements.
from neutrino.
I wrote the original implementation of environment variables in create-react-app, and am sad to say that I just haven't put this in a preset yet. This doesn't really make sense for a Node.js preset, since it can read from the environment at execution time. For the web preset, maybe it'd be nice if there was a way to specify additional environment variables in package.json.
Extending the environment variables used in EnvironmentPlugin
right now would not be fun. I think the best workaround solution right now is to extend the plugin to read from those files at build time and inject them.
from neutrino.
Ha! That's awesome, I'm a fan of your work on create-react-app :). Ok cool, the only problem with defining variables in package.json
would be that they'd be committed to version control obviously, but the EnvironmentPlugin
solution is workable.
from neutrino.
My Ops team needs to assign those at runtime. How can we do that? I'm using neutrino-preset-node
to run a server. It'd be great for the server to receive those env vars at runtime, dynamically, while still using process.env.WHATEVER, not transpiled-in at build time.
New issue for it: #319
from neutrino.
You can add @neutrinojs/env
:
module.exports = {
use: [
...
['@neutrinojs/env', ['MY_VAR']], // 1
//['@neutrinojs/env'], // 2 - does not work
]
};
For case 1, however, if MY_VAR
is not set, you will get a warning from webpack.EnvironmentPlugin
that there is no default value;
from neutrino.
Oh lovely, this is precious!
from neutrino.
I am using
const { EnvironmentPlugin } = require("webpack");
module.exports = {
use: [
[
"@neutrinojs/react-components",
{
devServer: {
// Disabling options.hot will also disable devServer.hot
hot: true,
// Proxy requests that don't match a known file to the specified backend.
proxy: "https://127.0.0.1:9000/v1"
}
}
],
neutrino => {
neutrino.config
.plugin("env")
.use(EnvironmentPlugin, [{ TEST: JSON.stringify("test") }]);
// .use(EnvironmentPlugin, ["URL", "TOKEN", "PROJECT"]);
}
]
};
However it does not inject variables to process.env
on the frontend
Update
Using
.use(DefinePlugin, [
{ "process.env": { test: JSON.stringify("test") } }
]);
Works just fine
from neutrino.
Hi! Testing your snippet works for me locally using Neutrino 8.3.0?
Though note the EnvironmentPlugin docs say:
Unlike DefinePlugin, default values are applied to JSON.stringify by the EnvironmentPlugin.
...so the JSON.stringify()
is unnecessary (and adds extra quotes). Without knowing how you're testing this, it's hard to know if that fixes your issue (eg if you were checking for the exact value, as opposed to whether it was set at all)?
Failing that, I would:
- check that you're using a webpack version that includes this upstream fix (webpack 3.11+), which should be the case since Neutrino 8.3.0 sets the webpack dependency as
^3.12.0
. - look at the output from
--inspect
for further clues:
https://neutrinojs.org/cli/#-inspect
from neutrino.
Related Issues (20)
- Issue: alias and config externals HOT 3
- Webpack 5 support HOT 5
- Tests fail because of CRLF-LF HOT 4
- Switch from eslint-loader to eslint-webpack-plugin HOT 3
- Optional chaining doesn't work out of the box HOT 2
- Allow specifying karma files option without removing the tests file specification neutrino use HOT 1
- Cannot use same babel plugin multiple times HOT 2
- Jest: custom moduleNameMapper entries should have priority
- rollup HOT 3
- Prettier breaks Neutrino webpack chain indent style HOT 1
- OTF fonts not supported by font-loader middleware HOT 3
- Updating React to v17 HOT 2
- nodejs build doesn't includes dependencies HOT 1
- Dependency Dashboard
- Alternative output without deleting other files HOT 1
- Support webpack-dev-server v4 HOT 3
- Build library for the browser HOT 1
- fullScreen make the app crash on armhf HOT 1
- Npm start failed to launch the project ! HOT 2
- Neutrino still under development? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from neutrino.