- To eliminate gap between code-merge and deployment for seamless releases
- To eliminate guesswork out of the latest staging link status etc.
- To eliminate labour of manual link-sharing
Using Vercel's built-in Git integration with Bitbucket, every code merge to any branch will automatically create a staging/preview link. Code merge to the release branch will automatically create a production link.
We need to setup the integration on the Vercel Dashboard. We will be using the ens-api project for this example. Kindly switch out the project ticker when applying across the other projects.
- Go to https://vercel.com/1xt/ens-api/settings/git-integration?provider=bitbucket
- Add
1xt/ens-api - Set Production Branch to
Custom&&release - Done.
You can test it by checking in code to the develop branch and watch it get deployed as a preview link on Vercel instantly.
But at this point, the env vars will not be working as the Vercel Env Vars need to be filled for every environment (not only the Dev environment when we used to manually deploy) when using the Git Integration.
So, we got to go the Project Settings > Environment Variables page (https://vercel.com/1xt/ens-api/settings/environment-variables) to fill up the Preview and Production tabs.
You can imagine how taxing this would be to do for every project. Therefore, here's a better solution to save the env vars in bulk. We will be using a package called Vercel Env that leverages the Vercel cli to upload the env vars in bulk by running it through a bash loop for us:
- Install the package globally:
npm install -g @kykungz/vercel-env - Done! To deploy .env to a specific env like preview for example, you can do this:
vercel-env preview .env. The environment options aredevelopment|preview|production - For more info refer to the package for instructions: https://www.npmjs.com/package/@kykungz/vercel-env