Deploy a Turborepo App to Vercel

Deploy a Turborepo app with an encrypted .env.vault file to Vercel.

Find a complete code example on GitHub for this guide.

Initial setup

Create a new monorepo.

npx create-turbo@latest

This will create a handful of files and a couple workspaces (apps).

ls -1
README.md
apps/
node_modules/
package-lock.json
package.json
packages/
turbo.json

Edit apps/web/app/page.tsx to include process.env.NEXT_PUBLIC_HELLO and say 'Hello World'.

apps/web/app/page.tsx

export default function Page() {
  return (
    <>
      Hello {process.env.NEXT_PUBLIC_HELLO}.
    </>
  );
}

Declare the environment variable in turbo.json.

{
  ..
  "globalEnv": [
    "NEXT_PUBLIC_HELLO"
  ]
}

If you prefer to set an environment variable on a workspace only and not globally across your turborepo, you can do that with the pipeline env key.

Add .vercelignore file.

.vercelignore

.env*
!.env.vault

Commit that to code and deploy it to Vercel.

npx vercel@latest deploy --prod

Your first deploy will likely fail because you need to add a couple custom configurations. Go to project settings and do the following.

Set Build & Development Settings > Framework Preset to Next.js and override the build command with cd ../.. && npm run build --filter=web.

vercel.com/org/project/settings

Set the root directory to apps/web.

vercel.com/org/project/settings

Deploy again.

npx vercel@latest deploy --prod

yourapp.vercel.app

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-cli

Install dotenv-cli.

npm install github:motdotla/dotenv-cli --save

We are installing from motdotla/dotenv-cli temporarily. Once entropitor/dotenv-cli upgrades to [email protected] we will recommend the simpler npm install dotenv-cli --save command.

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

.env

# .env
NEXT_PUBLIC_HELLO="World"

Adjust your package.json scripts to inject the environment variables into the turbo command.

package.json

"scripts": {
  "build": "dotenv -- turbo run build",
  "dev": "dotenv -- turbo run dev",
  "lint": "dotenv -- turbo run lint",
},

See more about using environment variables with turborepo.

Try running it locally.

npm run dev
docs:dev: - ready started server on 0.0.0.0:3001, url: http://localhost:3001
web:dev: - ready started server on 0.0.0.0:3002, url: http://localhost:3002

Visit localhost:3002

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.

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

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.