From 9f4e7076827b333538c1b2f97337d3bf93490838 Mon Sep 17 00:00:00 2001 From: Luis Fernando Alvarez D Date: Wed, 28 Mar 2018 17:11:40 -0500 Subject: [PATCH] New example: with-now-env (#4073) --- examples/with-now-env/README.md | 43 ++++++++++++++++++++++++++ examples/with-now-env/next.config.js | 27 ++++++++++++++++ examples/with-now-env/now-secrets.json | 4 +++ examples/with-now-env/now.json | 7 +++++ examples/with-now-env/package.json | 17 ++++++++++ examples/with-now-env/pages/index.js | 22 +++++++++++++ 6 files changed, 120 insertions(+) create mode 100644 examples/with-now-env/README.md create mode 100644 examples/with-now-env/next.config.js create mode 100644 examples/with-now-env/now-secrets.json create mode 100644 examples/with-now-env/now.json create mode 100644 examples/with-now-env/package.json create mode 100644 examples/with-now-env/pages/index.js diff --git a/examples/with-now-env/README.md b/examples/with-now-env/README.md new file mode 100644 index 0000000000..d10c776f9d --- /dev/null +++ b/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) diff --git a/examples/with-now-env/next.config.js b/examples/with-now-env/next.config.js new file mode 100644 index 0000000000..bf70081667 --- /dev/null +++ b/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 + } +} diff --git a/examples/with-now-env/now-secrets.json b/examples/with-now-env/now-secrets.json new file mode 100644 index 0000000000..169f57182a --- /dev/null +++ b/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" +} diff --git a/examples/with-now-env/now.json b/examples/with-now-env/now.json new file mode 100644 index 0000000000..872ff148d7 --- /dev/null +++ b/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" + } +} diff --git a/examples/with-now-env/package.json b/examples/with-now-env/package.json new file mode 100644 index 0000000000..9935d81a8b --- /dev/null +++ b/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" + } +} diff --git a/examples/with-now-env/pages/index.js b/examples/with-now-env/pages/index.js new file mode 100644 index 0000000000..b2fd7a6a8f --- /dev/null +++ b/examples/with-now-env/pages/index.js @@ -0,0 +1,22 @@ +export default () => ( +
+

+ Hello World! Here's a secret shared with the client using webpack + DefinePlugin: {process.env.SECRET}, the secret is shared + at compile time, which means every reference to the secret is replaced + with its value +

+ +
+) -- GitLab