Vercel with Remix

Learn how to configure Vercel with Dotenv Vault for a Remix application. This tutorial assumes you have already created a .env file and synced it.

You can find a complete example repo here.

1. Install & preload dotenv-vault

Install dotenv-vault

$ npm install dotenv --save

Preload dotenv. This will inject environment variables ahead of Remix.

"scripts": {
  "build": "node -r dotenv/config node_modules/.bin/remix build",
  config node_modules/.bin/remix dev"
},

example

2. Set up Remix ENV

Do the following for any endpoints that use environment variables.

• Require dotenv
• Add a loader that exposes process.env as data

Here’s a hello world example in the app/routes/index.tsx file.

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

require('dotenv').config()

export async function loader() {
  return json({
    ENV: {
      HELLO: process.env.HELLO, // HELLO="World" in .env file
    },
  });
}

export default function Index() {
  const data = useLoaderData()

  return (
    <h1>Hello {data.ENV.HELLO}</h1>
  );
}

example

3. Run dotenv-vault build

Run npx dotenv-vault build to build your encrypted .env.vault file.

$ npx dotenv-vault build

4. Get DOTENV_KEY

Run npx dotenv-vault keys production.

$ npx dotenv-vault keys production
remote:   Listing .env.vault decryption keys... done

dotenv://:[email protected]/vault/.env.vault?environment=production

5. Set DOTENV_KEY

Visit your Vercel Project > Settings > Environment Variables.

Set DOTENV_KEY to the value returned in step 4.

6. Commit and push

That’s it!

Commit those changes safely to code and push to GitHub.

When the CI runs, it will recognize the DOTENV_KEY, decrypt the .env.vault file, and load the CI environment variables to ENV. If a DOTENV_KEY is not set (like during development on your local machine) it will fall back to regular dotenv.