Deploy an Express.js App to Vercel

Deploy an Express.js app with an encrypted .env.vault file to Vercel.

Initial setup

Install express.

npm install express --save

Create an index.js file with the web server code.

index.js

const PORT = process.env.PORT || 3000
const express = require('express')
const app = express()

app.listen(PORT, () => {
  console.log(`Running on port ${PORT}.`)
})

app.get('/', function (req, res) {
  res.send(`Hello ${process.env.HELLO}`)
})

Add vercel.json file to run your app on Vercel.

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js"
    }
  ]
}

Add .vercelignore file.

.vercelignore

.env*
!.env.vault

Commit that to code and deploy it to Vercel.

npx vercel@latest deploy --prod

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

yourapp.vercel.app

Install dotenv

Install dotenv.

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

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

.env

# .env
HELLO="World"

As early as possible in your application, import and configure dotenv.

index.js

require('dotenv').config()
console.log(process.env) // remove this after you've confirmed it is working

const PORT = process.env.PORT || 3000
const express = require('express')
...

Try running it locally.

node index.js
{
  ...
  HELLO: 'World'
}
Server running on port: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

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

Use the UI to configure those secrets per environment.

www.dotenv.org

Then build your encrypted .env.vault file.

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.

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

Set DOTENV_KEY on Vercel using the CLI.

npx vercel@latest env add DOTENV_KEY
? What’s the value of DOTENV_KEY? dotenv://:[email protected]/vault/.env.vault?environment=production
✅  Added Environment Variable DOTENV_KEY to Project nodejs-vercel [94ms]

Or use Vercel's UI.

vercel.com

Deploy

Commit those changes safely to code and deploy.

npx vercel@latest deploy --prod

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

yourapp.vercel.app