2 minutes reading time

On this page

Language Guides

Deploy a Node.js App to Netlify

Deploy a Node.js app with an encrypted .env.vault file to Netlify.

Heads up! This guide assumes you are already familiar with dotenv and have synced your secrets with dotenv-vault.

Initial setup

Generate a next.js application (or the front-end framework of your choice).

CLI
npx create-next-app@latest --example hello-world .

This will create a handful of files.

CLI
ls -1
README.md
next-env.d.ts
node_modules
package-lock.json
package.json
pages
tsconfig.json

Edit pages/index.tsx to include process.env.NEXT_PUBLIC_HELLO.

pages/index.tsx
export default function IndexPage() {
  return (
    <div>
      Hello {process.env.NEXT_PUBLIC_HELLO}.
    </div>
  )
}

Add netlify.toml.

netlify.toml
[build]
  command = "npm run build"
  publish = ".next"

Commit that to code and deploy it to Netlify.

CLI
npx netlify-cli@latest deploy --build --prod

Once deployed, your app will say 'Hello .' as it doesn’t have a way to access the environment variable yet. Let’s do that next.

Install dotenv

Install dotenv.

CLI
npm install dotenv --save # Requires dotenv >= 16.1.0

Create a .env file in the root of your project.

.env
# .env
NEXT_PUBLIC_HELLO="World"

Preface your npm package.json scripts with dotenv preloading.

package.json
"scripts": {
  "dev": "node -r dotenv/config ./node_modules/.bin/next",
  "build": "node -r dotenv/config ./node_modules/.bin/next build",
  "start": "node -r dotenv/config ./node_modules/.bin/next start"
}

Try running it locally.

CLI
npm run dev
started server on 0.0.0.0:3000, url: http://localhost:3000

Visit localhost:3000

Browser
⋅⋅⋅
localhost:3000

Perfect. process.env now has the keys and values you defined in your .env file.

That covers local development. Let’s solve for production next.

Build .env.vault

Push your latest .env file changes and edit your production secrets. Learn more about syncing

CLI
npx dotenv-vault@latest push
npx dotenv-vault@latest open production

Use the UI to configure those secrets per environment.

UI
⋅⋅⋅
dotenv.org

Then build your encrypted .env.vault file.

CLI
npx dotenv-vault@latest build

Its contents should look something like this.

.env.vault
#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

Set DOTENV_KEY

Fetch your production DOTENV_KEY.

CLI
npx dotenv-vault@latest keys production
# outputs: dotenv://:[email protected]/vault/.env.vault?environment=production

Set DOTENV_KEY on Netlify using the CLI.

CLI
npx netlify-cli@latest env:set DOTENV_KEY "dotenv://:[email protected]/vault/.env.vault?environment=production"

Or use Netlify’s UI.

UI
⋅⋅⋅

Deploy

Commit those changes safely to code and deploy.

That’s it! On deploy, your .env.vault file will be decrypted and its production secrets injected as environment variables – just in time.

You’ll know things worked correctly when you see 'Loading env from encrypted .env.vault' in your logs. If a DOTENV_KEY is not set (for example when developing on your local machine) it will fall back to standard dotenv functionality.

⋅⋅⋅
npx netlify-cli@latest deploy --build --prod