How to manage application variables in a ReactJS app w/ gulp? - gulp

Question

I have some application/configurations variables, such as MY_ENDPOINT, that should point to http://dev.myendpoint/ for dev and http://myendpoint/ for production. Where should I store this information in a ReactJS application that uses gulpjs (and flux)?

Answer 1

If you're using browserify, you can use the envify transform to provide compile time variables.
var envParams = {};
function bundle(){
return gulp.src('src/app.js')
.pipe(gulpBrowserify({
transform: [
'reactify',
['envify', envParams]
]
}))
.pipe(gulp.dest('dist'));
};
gulp.task('scripts-dev', function(){
envParams = {MY_ENDPOINT: 'http://dev.myendpoint/'};
return bundle();
});
gulp.task('scripts-prod', function(){
envParams = {MY_ENDPOINT: 'http://myendpoint/'};
return bundle();
});
And in your code:
fetch(process.env.MY_ENDPOINT + "api/foo')...
You can also supply env vars on the command line, however the gulp file will override them by default:
MY_ENDPOINT=something gulp scripts-dev
And to allow command line to take precedence:
envParams = {MY_ENDPOINT: process.env.MY_ENDPOINT || 'http://myendpoint/'};
// or with es6 shim
envParams = Object.assign({MY_ENDPOINT: 'http://myendpoint/'}, process.env);
You can also use envify before other transforms which require static strings, like brfs:
var config = JSON.parse(fs.readFileSync(process.env.CONFIG_PATH));
Which will compile into:
var config = JSON.parse(fs.readFileSync('/home/.../dev-config.json'));
And finally into:
var config = JSON.parse('{"foo": "bar"}');