Introduction to Vercel, Frontend as a Service for Developers
A few weeks ago I looked at Payload, which wants to be the universal backend for any CMS app. So it feels somewhat appropriate to look at Vercel, which wants to tie up the frontend. Vercel builds a Frontend as a Service product — they make it easy for engineers to deploy and run the user-facing parts of their applications. So Vercel takes your code, puts it on servers around the world, puts a URL in front of it, and optimizes it to run and load fast.
If I want to make changes to my website, all I need to do is push those changes to my GitHub repository, and Vercel automatically redeploys the site and puts the new code on the server. You might recognize all this as the Jamstack, which I looked at via Netlify. That term has slowly gone out of fashion, however, the comparison of Vercel with Netlify as a “web stack” is still valid (and the two companies are competitors in the framework wars too).
Before starting, I made sure that my eastmad GitHub account was available. Then I went for the Vercel installer. This is also pointed at from their template projects in GitHub, which worked better for me.
We’ve connected to GitHub, so now I can create a template. I chose Vite and Vue.js, and I’ll keep this public.
I installed the Vite + Vue.js project, largely because I have already played around with this a little when trying Tauri in a previous post. This all worked successfully, and my template was already live:
Note that we get the preview page on the left, and the site’s temporary domain, https://vite-omega-three-80.vercel.app/, which you can visit now to see my alterations.
Looking at the menu from Vercel’s dashboard reminds us of the two things we may well want to do later: get access to storage and use our own domain.
Vercel’s Vue template code is forked into my GitHub account:
Just to make it clear, Vercel associates my GitHub account (where it forked its template code) with me, so it can watch the repo for changes while I develop locally. This is why I don’t clone straight from Vercel’s repo.
Next, I clone my project template to work locally on it:
I loaded the project into Cursor, adding the Vue official extension as recommended. But I won’t be doing any serious development — just making small changes to the template.
I install and run the project from the command line:
Now we have the site up locally. We aren’t here to do any serious Vue development, so let’s just do one quick cycle.
- We’ll replace the Vite and Vue.js logos with the New Stack logo.
- We’ll change the count button to one that starts from 10 and counts backward.
First, I’ll save an image of TheNewStack.io logo in the public directory, alongside the Vite image:
I then change the template in App.vue accordingly:
|
1 2 3 4 5 6 7 8 9 10 |
... <template> <div> <a href="https://thenewstack.io" target="_blank"> <img src="/TheNewStack.png" class="logo" alt="The New Stack logo" /> </a> </div> <HelloWorld msg="The New Stack" /> </template> ... |
I check the browser, it loads it immediately — part of this is Hot Module Replacement (HMR). Now let’s change the count up to a countdown. That code is in the HelloWorld.vue component:
|
1 2 3 4 5 6 7 8 9 |
... const count = ref(10) ... <template> <h1>{{ msg }}</h1> <div class="card"> <button type="button" @click="count--">count is {{ count }}</button> </div> </template> |
And after that quick hack, we immediately have:
The countdown does indeed go backward. So we have achieved our arbitrary edit cycle. So let’s get this back up to Vercel.
Looking at the deployment tab on my Vercel dashboard, we confirm that we are currently on the initial commit:
And of course, the actual deployed page confirms this.
Now we check in the code (I added the image in a separate commit):
We immediately see the deployment tab upgraded:
This leaves our dashboard with:
So that was pretty straightforward. You can see this result for yourself.
But concerning the two issues I mentioned earlier. The first is: given that this is just a frontend, how do we connect up to a database? Well, we will try a native integration. I’m sure you saw the “storage” tab on the dashboard:
I looked at the blob storage, which is cached inside Vercel’s edge network. So you can use it for large files like videos. The setup is a little too detailed to go into here, but the basics are like a document store. To add things:
|
1 |
const blob = await put('folder/file.txt', 'Hello World!', { access: 'public' }); |
Then to access them:
|
1 2 3 4 5 |
const listOfBlobs = await list({ cursor, limit: 1000, prefix: 'folder/', }); |
Obviously, you will need to design the appropriate storage for your application. This implies you grok the security, caching and administration concepts that data storage comes with. And you may just be reading this post to see how to put a site up quickly.
The other issue from earlier is using your own domain. You can add your domain from settings:
Then you’ll need to configure the DNS records of your domain with your registrar (Vercel will provide the detailed instructions). I went over this in a little more detail with Netlify.
Conclusion
If the speed of access to your website via an edge network is what matters to you most, this is what Vercel supplies. Changes are immediately picked up after a git push and your site is updated. Working with backend services is something you need to design beforehand, however — you won’t have the flexibility of something like Rails to iterate in. And there seems to be a generous free plan right now. So if your backend needs are minimal, this is a great place to start.
