← docs

Hello World: Vercel

In this guide you'll learn how to make Vercel and Dotenv Vault work together. Get started down below.


Optional video to this guide.


Let's get started.

1

Create project on Vercel

Go to vercel.com/dashboard and click Add New > Project.

On the next screen, clone the NextJS template.

Set the name for your GitHub repository and click Create. Your project will be created on GitHub.

2

git clone

Go to github.com, locate the clone command, and clone your project.

$ git clone git@github.com:motdotla/hello-world-vercel.git
Cloning into 'hello-world-vercel'...
3

npm run dev

Run npm install and then npm run dev to run the project.

$ npm install
$ npm run dev

Visit your Hello World app at localhost:3000.

4

Set up project on Dotenv

Now that Vercel is setup, you can set up Dotenv Vault. Run npx dotenv-vault new.

$ npx dotenv-vault new
local:   Press y (or any key) to create a new project vault (.env.vault): y

On the next page, confirm the name of your project and click Next.

5

Log in to Dotenv

Next you need to login to generate your .env.me credential.

$ npx dotenv-vault login
local:   Press y (or any key) to login (.env.me): y

On the next page, follow the steps and click Log in.

6

Open your project on Dotenv

Run npx dotenv-vault open to view your project on Dotenv.

$ npx dotenv-vault open
local:   Press y (or any key) to open up the browser: y
local:   Opening project page...

It will open up your project on Dotenv. It looks and works similarly to GitHub.

Great! Now your project just needs a .env file.

7

Create .env file

Create your .env file.

NEXT_PUBLIC_HELLO="Development Dog"
NEXT_PUBLIC_IMAGE_URL="https://www.dog.com/Breeds/images/AllBreeds/182.jpg"

Use those values in the interface.

And now your local development should look something like this.

8

Run npx dotenv-vault push

Securely push your .env file. Run npx dotenv-vault push.

$ npx dotenv-vault push
remote:   Securely pushing (.env)... done
remote:   Securely pushed development (.env)

Now the rest of your team can securely pull those changes, or you can even edit them from the interface.

9

Configure production environment

Proceed to the production environment and get it ready for Vercel.

Set NEXT_PUBLIC_HELLO and NEXT_PUBLIC_IMAGE_URL with your intended production values.

10

Add Vercel infrastructure

Next get it working with Vercel. Click the Infrastructure tab and then click Vercel.

Then follow the manual setup instructions.

11

Set IT token on Vercel

  1. Go to your project settings on Vercel
  2. Scroll down and click Environment Variables
  3. Add your IT token as an environment variable and click Add

FYI: Learn more about IT tokens and how they work here.

Next you just need to instruct Vercel to securely pull environment variables from Dotenv Vault.

12

Instruct Vercel to pull from Vault

  1. Navigate to Settings > General > Build & Development
  2. Click OVERRIDE next to BUILD COMMAND
  3. Preface the build command with the dotenv-vault pull command and click Save

The override command will look something like this.

npm_config_yes=true npx dotenv-vault@latest pull --dotenvMe $DOTENV_IT && next build
13

Rebuild & Deploy

You're all set up. Vercel will securely pull your latest environment variables - each time a build & deploy occurs.

Let's trigger a deployment right now - to see it in action. Go to deployments, click to the right, and click Redeploy.

Watch the build log and you will see Vercel securely pull your production environment variables.

Your project is deployed, your environment variables are centrally managed securely in your vault, and they are securely deployed with any new Vercel deploy.

As the page says, "Welcome to Production Puppy (NEXT_PUBLIC_HELLO)". 🐶

That's it!

Enjoy Dotenv Vault and keep your secrets safe.


Ready to get started?
Create your Dotenv Account