1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

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

This commit is contained in:
Luis Fernando Alvarez D 2018-03-28 17:11:40 -05:00 committed by Tim Neutkens
parent 4570f2d050
commit 9f4e707682
6 changed files with 120 additions and 0 deletions

View file

@ -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)

View file

@ -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
}
}

View file

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

View file

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

View file

@ -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"
}
}

View file

@ -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>
)