New example: with-now-env (#4073)

examples/with-now-env/README.md

@@ -0,0 +1,43 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-now-env)
+
+# Now-env example
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-now-env with-now-env-app
+# or
+yarn create next-app --example with-now-env with-now-env-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-now-env
+cd with-now-env
+```
+
+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
+```
+
+keep in mind that in order to deploy the app to `now` the env [secrets](https://zeit.co/docs/getting-started/secrets) defined in `now.json` should be listed in your account
+
+## The idea behind the example
+
+This example shows the usage of [now-env](https://github.com/zeit/now-env), it allows to use secrets in development that will be replaced in production by the secrets defined with [now](https://zeit.co/docs/getting-started/secrets)

examples/with-now-env/next.config.js

@@ -0,0 +1,27 @@
+/**
+ * After the next require you can use process.env to get your secrets
+ */
+require('now-env')
+
+console.log({
+  SECRET: process.env.SECRET,
+  ANOTHER_SECRET: process.env.ANOTHER_SECRET,
+  SECRET_FAIL: process.env.SECRET_FAIL
+})
+
+/**
+ * If some of the envs are public, like a google maps key, but you still
+ * want to keep them secret from the repo, the following code will allow you
+ * to share some variables with the client, configured at compile time.
+ */
+module.exports = {
+  webpack: config => {
+    config.plugins.forEach(plugin => {
+      if (plugin.constructor.name === 'DefinePlugin') {
+        plugin.definitions['process.env.SECRET'] = JSON.stringify(process.env.SECRET)
+      }
+    })
+
+    return config
+  }
+}

examples/with-now-env/now-secrets.json

@@ -0,0 +1,4 @@
+{
+  "@my-secret-key": "keep-it-secret",
+  "@my-other-secret-key": "keep-it-secret-too"
+}

examples/with-now-env/now.json

@@ -0,0 +1,7 @@
+{
+  "env": {
+    "SECRET": "@my-secret-key",
+    "ANOTHER_SECRET": "@my-other-secret-key",
+    "SECRET_FAIL": "@this-is-not-defined"
+  }
+}

examples/with-now-env/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-now-env",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "now-env": "^3.0.4"
+  }
+}

examples/with-now-env/pages/index.js

@@ -0,0 +1,22 @@
+export default () => (
+  <div className='hello'>
+    <p>
+      Hello World! Here's a secret shared with the client using webpack
+      DefinePlugin: <strong>{process.env.SECRET}</strong>, the secret is shared
+      at compile time, which means every reference to the secret is replaced
+      with its value
+    </p>
+    <style jsx>{`
+      .hello {
+        font: 15px Helvetica, Arial, sans-serif;
+        background: #eee;
+        padding: 100px;
+        text-align: center;
+        transition: 100ms ease-in background;
+      }
+      .hello:hover {
+        background: #ccc;
+      }
+    `}</style>
+  </div>
+)