Add environment variable related docs

src/docs/configurations/env-vars.js

@@ -0,0 +1,39 @@
+import {stripIndent} from 'common-tags'
+
+export default {
+  id: "env-vars",
+  title: "Using Environment Variables",
+  content: stripIndent`
+    Sometimes, we may use configuration items inside Storybook. It might be a theme color, some client secret, or a JSON string. So, we usually tend to hard code them.
+
+    But you can expose those configurations via "environment variables." For that, you need to prefix your environment variables with \`STORYBOOK_\` prefix.
+
+    For an example, let's expose two environment variables like this:
+
+    ~~~sh
+    STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
+    ~~~
+
+    Then we can access these environment variables anywhere inside our JS code like below:
+
+    ~~~js
+    console.log(process.env.STORYBOOK_THEME)
+    console.log(process.env.STORYBOOK_DATA_KEY)
+    ~~~
+
+    > Even though we can access these env variables anywhere in the client side JS code, it's better to use them only inside stories and inside the main Storybook config file.
+
+    ## Build time environment variables
+
+    You can also pass these environment variables when you are [building your storybook](http://localhost:3000/docs/basics/exporting-storybook) with \`build-storybook\`.
+
+    Then they'll be hard coded to the static version of your Storybook.
+
+    ## NODE_ENV env variable
+
+    In addition to the above prefixed environment variables, you can also pass the NODE_ENV variable to Storybook. But, you normally don't need to do that since we set a reasonable default value for it.
+
+    * When running \`npm run storybook\`, we set NODE_ENV to 'development'
+    * When building storybook, we set NODE_ENV to 'production'
+  `
+};

src/docs/index.js

@@ -20,6 +20,7 @@ const data = {
         require('./configurations/custom-babel-config').default,
         require('./configurations/add-custom-head-tags').default,
         require('./configurations/serving-static-files').default,
+        require('./configurations/env-vars').default,
         require('./configurations/cli-options').default,
       ]
     },

src/index.js

@@ -12,6 +12,7 @@ ReactDOM.render(
   (
     <Router
       history={browserHistory}
+      render={applyRouterMiddleware(useScroll())}
     >
       <Route path="/" component={Homepage} />
       <Route path="/docs(/:sectionId/(:itemId))" component={Docs} />