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.
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.
Go to github.com, locate the clone command, and clone your project.
$ git clone firstname.lastname@example.org:motdotla/hello-world-vercel.git Cloning into 'hello-world-vercel'...
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.
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.
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.
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: ylocal: 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.
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.
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.
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.
Next get it working with Vercel. Click the Infrastructure tab and then click Vercel.
Then follow the manual setup instructions.
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.
The override command will look something like this.
npm_config_yes=true npx dotenv-vault@latest pull --dotenvMe $DOTENV_IT && next build
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)". 🐶
Enjoy Dotenv Vault and keep your secrets safe.
|New to dotenv-vault? Start here|
|Connecting infrastructure (docs coming soon)|
|Managing granular permissions (docs coming soon)|
|Rolling back versions (docs coming soon)|
|IT tokens limited credential|
|How dotenv-vault works|
|Use dotenv with Express|
|Use dotenv and dotenv-vault with Express|