Integrating Vercel with Doppler: Sync Secrets in Production
Tags: security, javascript
Published: 2021-10-07 13:13:58


## Summary

One of the great benefits of [Doppler](https://www.doppler.com/) is keeping your project in sync. We want to be able to sync our app wherever we develop and deploy. It only takes a few minutes to integrate the Vercel marketplace with Doppler, and that is what we will be doing in this tutorial

## Goals

In this tutorial we will learn how to install the [Doppler integration](https://www.doppler.com/integrations) from Vercel’s new marketplace. Learn how to sync the secrets in your doppler project for deployment.

## Add your Project to Vercel

The first thing we want to do is to login to our doppler account. I won’t be touching the details of creating an account and login into doppler, because I have already done an introduction to doppler in a [previous post](https://dev.to/umavictor6/intro-to-doppler-real-life-use-case-4g1a). So once we have logged into [Doppler](https://www.doppler.com/), we head over to [Vercel](https://vercel.com/) and add our project we want to integerate doppler with.

## Navigating to the account homepage
![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633410861280_project-dashboard.png)


We have an e-commerce site we want to integrate with Doppler, so we can hide secrets even as we deploy on vercel.
Syncing Doppler with your projects is simple and quick. Just enter the details and you'll be notified when new updates are available. So let’s get started.

## Syncing secrets in doppler with vercel

We want to first authorize Doppler. To do this, we click on the project we want to integrate doppler with, in my case, it’s an e-commerce site called `etsy-ecommerce` and then we click on the integrations tab

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633411583992_projectdash.png)


In our integeration page, we select vercel:

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633411701393_vercel.png)


Then click on `add integeration`, and let Doppler know you want to select a personal account (your vercel account)

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633425706370_selectvercelaccount.png)


When you click continue, you will be prompted to choose the particular project you want to integrate with Doppler from your list of projects in Vercel. Click on `Add Integration` and you will be taken to the setup integration page.

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633425934585_integerationsetup.png)


In the setup integration page, we key in all our details, choose the project we want to integrate, and the vercel environment we will be deploying to, which is production. Click Setup Integration and your secret for that config will now be automatically synced to Vercel.

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633427403977_vercelenv.png)


We can see all our environmental variables synced with vercel meaning we have successfully integerated doppler with vercel. Also, if we go to our doppler dashboard we can confirm by seeing that it is in sync with vercel. 

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633427628045_vercelinsync.png)

## Automatically trigger Vercel re-deploy

In this section we will look at how to automatically trigger a re-deploy in vercel when a secret is changed in doppler. To do this navigate to git in vercel and in our deploy hooks section, we give our hook a name and click the `create hook` button.

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633453404692_prodhook.png)


Let’s copy the webhook link and go back to our doppler dashboard. To use the webhook, you have to be part of a subscription with Doppler. Luckily for us, we can access this feature by doing a 30 day subscription without adding our credit card.
Now when we head back to the `etsy-ecommerce` project and click on webhooks we get a pop-up to add a new webhook.

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633462640256_webhook.png)


We paste in the link we copied and click on `add webhook`. Now we can select through the input that a re-deploy should be triggered when a change is made in production.

![](https://paper-attachments.dropbox.com/s_646597EDFB877EE568B378F3E51E1AE6DBDA81FE863D04672785C51F7718AD61_1633462890078_webhookprod.png)


Now if we make a change to one of our secrets in production, and save it, the change will be instantly reflected in vercel and trigger a deploy.

## Conclusion

In this tutorial we learned how to install the doppler integration from Vercel’s new marketplace. We also learned how to sync the secrets in our Doppler project for deployment.