Static config file at project root

After searching through the issues I can’t seem to find anyone asking this, but if I have missed it please link me to it.

I know CRA has the concept of env variables but I am looking for a little more than this (I want to include objects and arrays). I want to have a config directory in the root of my project, and inside an index.js something like:

import local from './local';
import global from './global';
const env = require(`./${process.env.NODE_ENV}`);

export default { ...global, ...env.default, ...local };

This will give me a config file for each environment but also a local.js where I can override anything I need, for example during development I want to change an API_URL to a local branch.

My question is using CRA can I get webpack to recognize this file outside of the src directory? I don’t want to have to eject just to add some static config files.

[joshhornby]

For anyone finding this issue, a working solution has been to have a config folder at the project root, inside I have production.js and development.js, each file looks something like:

module.exports = { key: 'value' }

I then have a index.js:

const merge = require('lodash/merge');
const global = require('./global');

var env; // let doesn't seem to work here
if (process.env.NODE_ENV === 'development') {
    env = require('./development');
} else {
    env = require('./production');
}

module.exports = merge(global, env);

And then in code I have just import this file and get the values eg config.key

[joshhornby]

@gaearon With the 1.0 updates the method listed above (https://github.com/facebookincubator/create-react-app/issues/1469#issuecomment-290081143) breaks due to the config file being outside src.

What do you suggest now? I don’t think pulling the config folder into src makes sense, so would be interested to hear how you’d solve this issue.