What is Continuous Deployment?
Continuous Deployment (CD) is a software release process, automating the deployment of code to production. It is an extension of Continuous Integration, where the new changes added into the main branch will be released into production. This process is ideal for teams who want to get their new features or bug fixes out to the public as quickly as possible.
In order to minimise the risk to deploying problematic code, a robust and comprehensive set of automated tests need to be in place. This ensures that new code being merged into the main branch (and subsequently deployed) is deployment ready and bug-free. In doing so, software development teams can automate their workflow processes, and do away with the need of manual deployment. This makes it easy for teams to release their new builds to production, encouraging small and incremental builds, rather than all at once, thus reducing the risk of each deployment.
However, if a team requires approval by higher authority, an alternative would be Continuous Delivery. Continuous Delivery is similar to Continuous Deployment, but without automatically deploying the changes to production. Although the deployment to production is done manually, the Continuous Delivery pipeline ensures that once the authorisation is given to release the build, the build is production ready and can be released at any time.
There are many tools available to facilitate this workflow, like Jenkins, TeamCity and GitLab, but in this tutorial, I will be showing you a free alternative where you can have CD for your web applications and have them hosted in their domain for free.
Why Vercel?
Vercel allows you to:
- Host your frontend project in their domain (vercel.app)
- Integrate with GitHub to enable CD on your projects
- Free!!!
Setting up CD in Vercel
For this tutorial, I will be setting up hosting and CD for a blank Create-React-Application in my GitHub repository.
Once you have linked your GitHub account with Vercel, you will be greeted with the dashboard page.
Click on the 'Import Project' button on the right.
Depending on what you want, you can either import from your Git repository, or use one of their boilerplate template to get your project started. In this tutorial we will be importing from Git. Click on the blue continue button and enter the URL to your Git repository.
Once the project has been imported, you can name your vercel project. This name will be used to host your project <PROJECT NAME>.vercel.app.
There are many framework presets that Vercel provides. It usually automatically detects the type of project that you have imported and recommends the preset according. This preset will set the defaults for the build command and output directory in the 'Build and Output Settings' section, but you can override it depending on your project.
You can also provide any environment variables that the project requires like API keys in the 'Environment Variables' section.
Lastly, if the Git repository that you imported does not have the frontend files in the root directory, you can set the correct directory on the 'Select root directory' at the top of the dialog.
Once you are satisfied with the settings, click on deploy and sit back and relax!
When Vercel has successfully deployed your application, your Git repo is now also configured for Continuous Deployment. Whenever a new PR is made, Vercel will automatically build the application and provide a live build of that version of the application. From these builds, you can test out the features of the new PR, while maintaining the production build in the main link. If you are satisfied, you can merge the PR and Vercel will update the production version of your application with the new changes, and viola! Your new changes have been deployed to production in a click of a button.
There are many CI/CD tools available but Vercel is my favourite. It is so easy to setup, the layout of their website is clean and simple to use, and once you set up your project in Vercel, it does everything by itself and you don't have to worry about deployments anymore!
Top comments (2)
Hi Kevin, how would you do a manual approval in Vercel?
Hi Sandro, this example shows pushing to the 'main' branch of the repository. However, if you were to create a branch and push to that branch, a good thing about Vercel is that it creates a temporary URL for you to view your changes in the branch. Only when you merge it with the 'main' branch, then it pushes the code to the main URL. This way, you can do manual approvals for your PR, which then updates the main deployment!