From 2ab1ae7f61868548a24cc2572d30471d31c50b55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Mon, 11 Feb 2019 14:15:06 +0100 Subject: [PATCH] Updated examples for build-time env configuration for v8 (#6237) * Updated examples for build-time env configuration for v8 * Add comment to build time config example with how to include entire .env --- examples/with-dotenv/README.md | 6 +-- .../.babelrc.js | 6 --- .../.env | 1 + .../README.md | 12 ++--- .../env-config.js | 8 ---- .../next.config.js | 45 +++++++++++++++++++ .../package.json | 2 +- .../pages/index.js | 2 +- 8 files changed, 57 insertions(+), 25 deletions(-) delete mode 100644 examples/with-universal-configuration-build-time/.babelrc.js create mode 100644 examples/with-universal-configuration-build-time/.env delete mode 100644 examples/with-universal-configuration-build-time/env-config.js create mode 100644 examples/with-universal-configuration-build-time/next.config.js diff --git a/examples/with-dotenv/README.md b/examples/with-dotenv/README.md index 8063a3ab..8fbe6479 100644 --- a/examples/with-dotenv/README.md +++ b/examples/with-dotenv/README.md @@ -46,6 +46,6 @@ This example shows how to inline env vars. **Please note**: * It is a bad practice to commit env vars to a repository. Thats why you should normally [gitignore](https://git-scm.com/docs/gitignore) your `.env` file. -* As soon as you are using an env var in your code it will be publicly available and exposed to the client. -* If you want to have more control of what is exposed to the client check out [tusbar/next-runtime-dotenv](https://github.com/tusbar/next-runtime-dotenv). -* Env vars are set (inlined) at build time. If you need to configure your app on rutime check out [examples/with-universal-configuration-runtime](../with-universal-configuration-runtime) +* In this example, as soon as you reference an env var in your code it will be automatically be publicly available and exposed to the client. +* If you want to have more centralized control of what is exposed to the client check out the example [with-universal-configuration-build-time](../with-universal-configuration-build-time). +* Env vars are set (inlined) at build time. If you need to configure your app on rutime check out [examples/with-universal-configuration-runtime](../with-universal-configuration-runtime). diff --git a/examples/with-universal-configuration-build-time/.babelrc.js b/examples/with-universal-configuration-build-time/.babelrc.js deleted file mode 100644 index 5d41651b..00000000 --- a/examples/with-universal-configuration-build-time/.babelrc.js +++ /dev/null @@ -1,6 +0,0 @@ -const env = require('./env-config.js') - -module.exports = { - presets: ['next/babel'], - plugins: [['transform-define', env]] -} diff --git a/examples/with-universal-configuration-build-time/.env b/examples/with-universal-configuration-build-time/.env new file mode 100644 index 00000000..4af484dc --- /dev/null +++ b/examples/with-universal-configuration-build-time/.env @@ -0,0 +1 @@ +TEST=it works! diff --git a/examples/with-universal-configuration-build-time/README.md b/examples/with-universal-configuration-build-time/README.md index d6998818..bcf17af4 100644 --- a/examples/with-universal-configuration-build-time/README.md +++ b/examples/with-universal-configuration-build-time/README.md @@ -41,13 +41,13 @@ now ## The idea behind the example -This example shows how to use environment variables and customize one based on NODE_ENV for your application using [transform-define](https://github.com/FormidableLabs/babel-plugin-transform-define) +This example shows how to use environment variables and customize one based on NODE_ENV for your application using `dotenv`, a `.env`-file and `next.config.js`. When you build your application the environment variable is transformed into a primitive (string or undefined) and can only be changed with a new build. This happens for both client-side and server-side. If the environment variable is used directly in your application it will only have an effect on the server side, not the client side. -To set the environment variables in runtime you can follow the example [with-universal-configuration-runtime]((https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration-runtime)) +## Please note -## Caveats - -- Because a babel plugin is used the output is cached in `node_modules/.cache` by `babel-loader`. When modifying the configuration you will have to manually clear this cache to make changes visible. Alternately, you may skip caching for `babel-loader` as shown [here](https://github.com/zeit/next.js/issues/1103#issuecomment-279529809). -- This example sets the environment configuration at build time, meaning the same build might not be used in e.g. both staging and production. For a solution which sets the environment at runtime, see [here](https://github.com/zeit/next.js/issues/1488#issuecomment-289108931). +- It is a bad practice to commit env vars to a repository. Thats why you should normally [gitignore](https://git-scm.com/docs/gitignore) your `.env` file. +- Any env var you expose in `next.config.js` will be publicly available and exposed to the client. +- This example sets the environment configuration at build time, meaning the same build might not be used in e.g. both staging and production. For a solution which sets the environment at runtime, see the example [with-universal-configuration-runtime](../with-universal-configuration-runtime). +- If you have many variables in `.env` and want to expose them without listing them all in `next.config.js`, see the example [with-dotenv](../with-dotenv). That example automatically exposes any variable that has been referenced in code, but keeps all other variables secret. diff --git a/examples/with-universal-configuration-build-time/env-config.js b/examples/with-universal-configuration-build-time/env-config.js deleted file mode 100644 index 390e1632..00000000 --- a/examples/with-universal-configuration-build-time/env-config.js +++ /dev/null @@ -1,8 +0,0 @@ -const prod = process.env.NODE_ENV === 'production' - -module.exports = { - 'process.env.BACKEND_URL': prod - ? 'https://api.example.com' - : 'https://localhost:8080', - 'process.env.VARIABLE_EXAMPLE': process.env.VARIABLE_EXAMPLE -} diff --git a/examples/with-universal-configuration-build-time/next.config.js b/examples/with-universal-configuration-build-time/next.config.js new file mode 100644 index 00000000..06544273 --- /dev/null +++ b/examples/with-universal-configuration-build-time/next.config.js @@ -0,0 +1,45 @@ +const dotEnvResult = require('dotenv').config() + +const prod = process.env.NODE_ENV === 'production' + +if (dotEnvResult.error) { + throw dotEnvResult.error +} + +module.exports = { + env: { + TEST: process.env.TEST, + BACKEND_URL: prod ? 'https://api.example.com' : 'https://localhost:8080' + } +} + +/* + If you want to include every variable in .env automatically, + replace the above module.exports with the code below. + + Warning: The below technique can be dangerous since it exposes every + variable in .env to the client. Even if you do not currently have + sensitive information there, it can be easy to forget about this when + you add variables in the future. + + If you have many variables and want a safer way to conveniently expose + them, see the example "with-dotenv". +*/ + +/* +const parsedVariables = dotEnvResult.parsed || {} +const dotEnvVariables = {} + +// We always want to use the values from process.env, since dotenv +// has already resolved these correctly in case of overrides +for (const key of Object.keys(parsedVariables)) { + dotEnvVariables[key] = process.env[key] +} + +module.exports = { + env: { + ...dotEnvVariables, + BACKEND_URL: prod ? 'https://api.example.com' : 'https://localhost:8080' + } +} +*/ diff --git a/examples/with-universal-configuration-build-time/package.json b/examples/with-universal-configuration-build-time/package.json index 32faf667..c341e3de 100644 --- a/examples/with-universal-configuration-build-time/package.json +++ b/examples/with-universal-configuration-build-time/package.json @@ -12,7 +12,7 @@ "react-dom": "^16.7.0" }, "devDependencies": { - "babel-plugin-transform-define": "^1.3.0" + "dotenv": "^6.2.0" }, "license": "ISC" } diff --git a/examples/with-universal-configuration-build-time/pages/index.js b/examples/with-universal-configuration-build-time/pages/index.js index 86a0eacd..1cbe0539 100644 --- a/examples/with-universal-configuration-build-time/pages/index.js +++ b/examples/with-universal-configuration-build-time/pages/index.js @@ -1,6 +1,6 @@ export default () => (
-

Environment variable process.env.VARIABLE_EXAMPLE is "{process.env.VARIABLE_EXAMPLE}"

+

Environment variable process.env.TEST is "{process.env.TEST}"

Custom environment variables process.env.BACKEND_URL is "{process.env.BACKEND_URL}"

)