Allow for env files (#1462)

* Allow for env files

* Add docs file for environment variables

docs/docs/environment-variables.md

@@ -0,0 +1,29 @@
+---
+title: "Environment Variables"
+---
+
+You can easily provide environment variables to your site. Just add a `.env.development` and/or `.env.production` file in your root folder for development or production builds respectively. The environment variables are embedded during build time using Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/). Because these variables are provided at build time, you will need restart your dev server or rebuild your site after changing them.
+
+## Example
+
+```
+# Example .env.development file
+
+API_URL=https://dev.example.com/api
+```
+
+```
+# Example .env.production file
+
+API_URL=https://example.com/api
+
+```
+
+These variables will be available to your site as `process.env.API_URL`.
+
+> You can not override certain environment variables as some are used internally for optimizations during build
+
+Reserved environment variables:
+
+- `NODE_ENV`
+- `PUBLIC_DIR`

packages/gatsby/package.json

@@ -35,6 +35,7 @@
     "css-loader": "^0.26.1",
     "debug": "^2.6.0",
     "detect-port": "^1.2.1",
+    "dotenv": "^4.0.0",
     "eventemitter2": "^4.1.0",
     "express": "^4.14.0",
     "express-graphql": "^0.6.6",

packages/gatsby/src/utils/webpack.config.js

@@ -2,6 +2,7 @@ import { uniq, some } from "lodash"
 import fs from "fs"
 import path from "path"
 import webpack from "webpack"
+import dotenv from "dotenv"
 import Config from "webpack-configurator"
 import ExtractTextPlugin from "extract-text-webpack-plugin"
 import StaticSiteGeneratorPlugin from "static-site-generator-webpack-plugin"
@@ -41,6 +42,30 @@ module.exports = async (
   const stage = suppliedStage
   const babelConfig = await genBabelConfig(program, babelStage)
 
+  function processEnv(stage, defaultNodeEnv) {
+    debug(`Building env for "${stage}"`)
+    const env = process.env.NODE_ENV ? process.env.NODE_ENV : `${defaultNodeEnv}`
+    const envFile = path.join(process.cwd(), `./.env.${env}`)
+    let parsed = {}
+    try {
+      parsed = dotenv.parse(fs.readFileSync(envFile, { encoding: `utf8` }))
+    } catch(e) {
+      if (e && e.code !== `ENOENT`) {
+        console.log(e)
+      }
+    }
+    const envObject = Object.keys(parsed).reduce((acc, key) => {
+      acc[key] = JSON.stringify(parsed[key])
+      return acc
+    }, {})
+
+    // Don't allow overwriting of NODE_ENV, PUBLIC_DIR as to not break gatsby things
+    envObject.NODE_ENV = JSON.stringify(env)
+    envObject.PUBLIC_DIR = JSON.stringify(`${process.cwd()}/public`)
+
+    return envObject
+  }
+
   debug(`Loading webpack config for stage "${stage}"`)
   function output() {
     switch (stage) {
@@ -127,12 +152,7 @@ module.exports = async (
           new webpack.HotModuleReplacementPlugin(),
           new webpack.NoErrorsPlugin(),
           new webpack.DefinePlugin({
-            "process.env": {
-              NODE_ENV: JSON.stringify(
-                process.env.NODE_ENV ? process.env.NODE_ENV : `development`
-              ),
-              PUBLIC_DIR: JSON.stringify(`${process.cwd()}/public`),
-            },
+            "process.env": processEnv(stage, `development`),
             __PREFIX_PATHS__: program.prefixPaths,
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
           }),
@@ -154,12 +174,7 @@ module.exports = async (
         return [
           new StaticSiteGeneratorPlugin(`render-page.js`, pages),
           new webpack.DefinePlugin({
-            "process.env": {
-              NODE_ENV: JSON.stringify(
-                process.env.NODE_ENV ? process.env.NODE_ENV : `development`
-              ),
-              PUBLIC_DIR: JSON.stringify(`${process.cwd()}/public`),
-            },
+            "process.env": processEnv(stage, `development`),
             __PREFIX_PATHS__: program.prefixPaths,
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
           }),
@@ -168,12 +183,7 @@ module.exports = async (
       case `build-css`:
         return [
           new webpack.DefinePlugin({
-            "process.env": {
-              NODE_ENV: JSON.stringify(
-                process.env.NODE_ENV ? process.env.NODE_ENV : `production`
-              ),
-              PUBLIC_DIR: JSON.stringify(`${process.cwd()}/public`),
-            },
+            "process.env": processEnv(stage, `production`),
             __PREFIX_PATHS__: program.prefixPaths,
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
           }),
@@ -183,12 +193,7 @@ module.exports = async (
         return [
           new StaticSiteGeneratorPlugin(`render-page.js`, pages),
           new webpack.DefinePlugin({
-            "process.env": {
-              NODE_ENV: JSON.stringify(
-                process.env.NODE_ENV ? process.env.NODE_ENV : `production`
-              ),
-              PUBLIC_DIR: JSON.stringify(`${process.cwd()}/public`),
-            },
+            "process.env": processEnv(stage, `production`),
             __PREFIX_PATHS__: program.prefixPaths,
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
           }),
@@ -261,12 +266,7 @@ module.exports = async (
           // optimizations for React) and whether prefixing links is enabled
           // (__PREFIX_PATHS__) and what the link prefix is (__PATH_PREFIX__).
           new webpack.DefinePlugin({
-            "process.env": {
-              NODE_ENV: JSON.stringify(
-                process.env.NODE_ENV ? process.env.NODE_ENV : `production`
-              ),
-              PUBLIC_DIR: JSON.stringify(`${process.cwd()}/public`),
-            },
+            "process.env": processEnv(stage, `production`),
             __PREFIX_PATHS__: program.prefixPaths,
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
           }),