Add application configuration based on build environment

README.md

@@ -98,6 +98,8 @@ The application structure presented in this boilerplate is **fractal**, where fu
 ├── src                      # Application source code
 │   ├── index.html           # Main HTML page container for app
 │   ├── main.js              # Application bootstrap and rendering
+│   ├── config               # Application environment settings
+│   │   └── development.js   # Configuration specific for development environment
 │   ├── components           # Global Reusable Presentational Components
 │   ├── containers           # Global Reusable Container Components
 │   ├── layouts              # Components that dictate major page structure
@@ -189,6 +191,15 @@ These are global variables available to you anywhere in your source code. If you
 |`__PROD__`|True when `process.env.NODE_ENV` is `production`|
 |`__TEST__`|True when `process.env.NODE_ENV` is `test`|
 
+### Application config
+
+It is possible to define environment specific variable in the `src/config` folder. Each environment needs it own file. This variables can then be used from the application using
+
+```js
+import config from 'config'
+config.my_variable
+```
+
 ### Styles
 
 Both `.scss` and `.css` file extensions are supported out of the box. After being imported, styles will be processed with [PostCSS](https://github.com/postcss/postcss) for minification and autoprefixing, and will be extracted to a `.css` file during production builds.

config/webpack.config.js

@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const project = require('./project.config')
 const debug = require('debug')('app:config:webpack')
+const path = require('path')
 
 const __DEV__ = project.globals.__DEV__
 const __PROD__ = project.globals.__PROD__
@@ -17,7 +18,10 @@ const webpackConfig = {
   devtool : project.compiler_devtool,
   resolve : {
     root       : project.paths.client(),
-    extensions : ['', '.js', '.jsx', '.json']
+    extensions : ['', '.js', '.jsx', '.json'],
+    alias: {
+      config: path.resolve(project.paths.client(), 'config', project.env)
+    }
   },
   module : {}
 }

src/config/development.js

@@ -0,0 +1,5 @@
+export const config = {
+  subtitle: '... in development'
+}
+
+export default config

src/config/production.js

@@ -0,0 +1,5 @@
+export const config = {
+  subtitle: '... in production'
+}
+
+export default config

src/config/test.js

@@ -0,0 +1,5 @@
+export const config = {
+  subtitle: '... in test'
+}
+
+export default config

src/routes/Home/components/HomeView.js

@@ -2,9 +2,13 @@ import React from 'react'
 import DuckImage from '../assets/Duck.jpg'
 import './HomeView.scss'
 
+import config from 'config'
+
+const subtitle = config.subtitle
+
 export const HomeView = () => (
   <div>
-    <h4>Welcome!</h4>
+    <h4>Welcome!<sub>{subtitle}</sub></h4>
     <img
       alt='This is a duck, because Redux!'
       className='duck'

tests/routes/Home/components/HomeView.spec.js

@@ -11,8 +11,11 @@ describe('(View) Home', () => {
 
   it('Renders a welcome message', () => {
     const welcome = _component.find('h4')
+    const subtitle = welcome.find('sub')
     expect(welcome).to.exist
+    expect(subtitle).to.exist
     expect(welcome.text()).to.match(/Welcome!/)
+    expect(subtitle.text()).to.match(/... in test/)
   })
 
   it('Renders an awesome duck image', () => {