Flexible ENV configuration - Dotenv-webpack integration

[acmitch]

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

• https://github.com/kentcdodds/cross-env
• https://github.com/motdotla/dotenv

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:

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

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

[acmitch]

PR https://github.com/coryhouse/react-slingshot/pull/590 attempts to implement this.