Flexible ENV configuration - Dotenv-webpack integration

Is your feature request related to a problem? Please describe.

React Slingshot should be more versatile when dealing with multiple environments and their configuration.

Dotenv should be supported via Dotenv-Webpack.

Describe the solution you'd like Dotenv-webpack plugin should be integrated into the webpack.config.dev.js and webpack.config.prod.js

// webpack.config.dev.js

// omitted
plugins: [
    new Dotenv({systemvars: true}),
    new HardSourceWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
// omitted

// webpack.config.prod.js

// DefinePlugin and GLOBALS is no longer needed

// const GLOBALS = {
//   'process.env.NODE_ENV': JSON.stringify('production'),
//   __DEV__: false
// };

// omitted
plugins: [
    // new webpack.DefinePlugin(GLOBALS),
    new Dotenv({systemvars: true}),
// omitted

Remove the following from tools/build.js. This should be controlled by the .env file not hard coded.

// tools/build.js

process.env.NODE_ENV = 'production';

A new .env.default file should be provided in the root directory, out of the box, with a similar approach:

// .env.default

NODE_ENV=
APP_NAME=
APP_RESOURCE_URL=

The src package should contain a new config directory, out of the box, with a similar approach:

// src/config/appConfig.js

import axios from "axios";

export default {
  site: {
    name: process.env.APP_NAME,
  },
  axiosClients: {
    resourceClient: {
      client: axios.create({
        baseURL: process.env.APP_RESOURCE_URL,
        responseType: 'json',
      })
    }
  }
};

Recommended: An .env entry should be added to the .gitignore file, out of the box.

To use the configuration simply import from the config file:

import config from "../config/appConfig";

console.log(config.site.name);

Describe alternatives you've considered

Additional context When a user clones React Slingshot he/she will need to create a .env file. A stretch goal, the setup.js could generate one.

A deployment should work as follows:

Clone the git repo
Create a .env file for that environment or set the ENV variables manually.
Run npm install & npm run build (a new command should do with without opening)
Copy the dist folder to the hosting directory
Nginx points to that.

Overall, this is not perfect but gives a lot more flexibility when deploying to multiple ENVS.

coryhouse / react-slingshot

Flexible ENV configuration - Dotenv-webpack integration #589