Continuous Deployment to Vercel

Today, we continue to prepare the scaffolding for our application. We haven't written any code yet, so this is a perfect time to setup continuous deployment because we don't have any bugs yet. Our goal today is to build a quick feedback loop that will alert us if anything breaks our site from building and being deployed.

Setup Vercel

We'll deploy our site to Vercel. I like using Vercel because it's free to non-commercial projects and incredibly easy to setup. As regards SvelteKit, an additional bonus is that the creator of Svelte and SvelteKit, Rich Harris, works at Vercel. This means Vercel will give first class support to fixing bugs, and beta features will be supported first on Vercel. If Next.js is your metaframework of choice then Vercel is also a great option. If another framework like Nuxt is your choice then you should look around and decide the best option for your use case. No matter which you choose, look for one that can easily connect to your GitHub code repository and automatically deploy your site on every push to every branch.

To get started:

• Commit your code to a new repository on GitHub if you haven't already.
• Create a Vercel account - I suggest you use your GitHub account to sign in to easily connect your GitHub repositories to Vercel.
• Connect your repo to Vercel by "Adding New Project" and navigating to select your repo. Their site is pretty user friendly, but also changes so I won't try to get perfect screenshots, but you can expect to move right into configuring their GitHub App:
• Then you will select the repository you want to connect to Vercel:

That's all you need to do. After that, you will see the Vercel deployments on your repository homepage:

And if you create a pull request, you'll notice how every push is being deployed and will be a status check on the repo with push specific test links:

The Vercel GitHub App will also leave a comment giving branch specific test links, for example, branch "day-2" on the "polylingual.dev" repo will have a test link like this: https://polylingual-dev-git-day-2-polylingual-development.vercel.app/.

If you have a failed build, you can click on the "Details" link to see the build logs and debug the issue:

By default you should receive a GitHub notification on failures and you can also set up other notifications, like Slack or email, if desired. You can learn more from their documentation on that and other features.

That's all for today's lesson. Really, choosing Vercel is not my main purpose here. My main point is that we should choose a hosting strategy that builds our application on every code change so we can be notified the moment we break something. When we see the red "x" that is the signal to stop everything and fix the build before continuing further. Using Vercel is just one easy way to make this an effortless habit.