Added universal configuration example (vercel#991)

timneutkens · arunoda · commit a8731d065127 · 2017-02-05T04:43:23.000+05:30
* Added universal configuration example

* Make example more clear
diff --git a/examples/with-universal-configuration/.babelrc b/examples/with-universal-configuration/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    ["transform-define", "./env-config.js"]
+  ]
+}
diff --git a/examples/with-universal-configuration/README.md b/examples/with-universal-configuration/README.md
@@ -0,0 +1,28 @@
+
+# With universal configuration
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/basic-css
+cd basic-css
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example show how to set custom environment variables for your application based on NODE_ENV using [transform-define](https://github.com/FormidableLabs/babel-plugin-transform-define).
diff --git a/examples/with-universal-configuration/env-config.js b/examples/with-universal-configuration/env-config.js
@@ -0,0 +1,5 @@
+const prod = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  'BACKEND_URL': prod ? 'https://api.example.com' : 'https://localhost:8080'
+}
diff --git a/examples/with-universal-configuration/package.json b/examples/with-universal-configuration/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "with-env",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-define": "^1.2.0"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/examples/with-universal-configuration/pages/index.js b/examples/with-universal-configuration/pages/index.js
@@ -0,0 +1,5 @@
+/* global BACKEND_URL */
+
+export default () => (
+  <div>Loading data from { BACKEND_URL }</div>
+)
