My love letter to Vercel

Not a sponsored post — unless Vercel wants to change that and toss some cash my way! 😄

The TL;DR

• Vercel simplifies the process for engineers to deploy and run the user-facing parts of their applications, known as the frontend.
• Applications typically consist of two parts: the frontend and the backend. Vercel allows teams to deploy the frontend separately, making the process much easier compared to deploying both parts on a single server.
• Deploying with Vercel offers features like deploy previews, functions as a service, analytics, and more.
• In addition to the frontend, Vercel has expanded to include cloud-like features such as storage and databases.
• While the method of deploying frontends was once a personal choice, tools like Vercel are now becoming the standard for teams getting their front ends online. Even the Medium website is built with Vercel!
• The enthusiasm expressed for Vercel in this post is not sponsored but comes from years of personal use and satisfaction with the product.

What does deploying mean, and why do I need to do it for my frontend?

The frontend of your application is what your users see. But it does more than that. Your typical frontend code does the following:

• Builds the visual part of a webpage using HTML and CSS.
• Handles interactivity and animations using JavaScript.
• Makes calls to internal and external APIs to fill pages with data, like a user profile page.

Frontends are organized as a set of files representing pages, their structure, and accompanying JavaScript for interactivity, logic, and API calls. Think of it like the front of a house (yes, chef) connecting the customer to the kitchen, ensuring orders reach the kitchen and the right food comes back to the customer. Deploying your frontend means putting all this online for users to see and interact with.

🔍 DEEPER LOOK 🔍

Some engineering teams keep all their application code, both the frontend and backend, in one big folder known as a monorepo. Others use separate folders for the frontend and backend, and some even have different folders for various parts of the backend. The choice of setup depends on what priorities a team has and how complicated their application is.

However you grasp the frontend, the key point is that frontend code needs a place to be. Developers create the frontend on their laptops and have to put it on a server so that web users can reach it. How do they do that? Well, there are a few choices:

1. Put it on a separate server, not connected to your backend.
2. Put it on the same server as your backend.
3. Use Infrastructure as a Service (IaaS) like AWS or Platform as a Service (PaaS) like Heroku, Railway, etc. This can be with or without your backend.

But here’s the catch — all these options need some setup and configuration. You’ll have to deal with things like setting up authentication/networking, caching your frontend globally for quick access, handling DNS for a nice URL, and other interesting tasks. I’m not trying to overwhelm you with unfamiliar terms or concepts; there’s just a bunch of things to take care of.

Vercel, along with similar products like Netlify (which I’ve also used and enjoyed), is designed specifically for deploying frontends and making the whole process super simple. It is quite expensive tho! But let’s unpack the value it adds…

Deploying to Vercel be like

The basic Vercel product:

Vercel makes deploying and using your frontend as easy as can be. For example, I have my frontend code in a GitHub repository, just like any software project. To get it online, all I have to do is create a Vercel account, grant it access to my repository, and set up the domain name. And just like that, your site is live!

Behind the scenes, Vercel takes my code, puts it on servers worldwide, adds a URL to it, and makes sure it runs and loads super fast. And guess what? This is just the beginning!

If I want to make changes to my website, I simply push those changes to my Github repo, and Vercel does the magic — it automatically updates the site with the new code on the server. They even give you a neat dashboard for each site you deploy, showing you status, recent updates, and the domains it’s hanging out at. Easy peasy!

Here’s another cool thing: deploy previews. Imagine you’re making changes to your website and thinking of merging them. With Vercel, when you open a pull request with these changes, they automatically try it out on a new server. This way, you can see how your site looks with the changes before actually applying them.

🚨 CONFUSION ALERT🚨

You might wonder, if your code is on the Github website, why isn’t it automatically “deployed” there? Why can’t users access the code on Github directly? Well, the answer is a bit complex, but the simple idea is that Github isn’t designed for that. It lacks things like domain handling, making the server visible to the outside world, preview features, and all the other cool stuff that platforms like Vercel offer. There’s a rarely mentioned feature called Github Pages that kinda lets you do this, but it’s not fancy enough for a proper application.

Vercel responding to the last meme

Next.js and Vercel: A Winning Combo

Here’s the exciting part about Vercel — they’re the creators of Next.js, one of the hottest web frameworks for React right now. Next.js is not only open source and free but also more popular than Vercel’s commercial product.

Now, what’s a web framework? It’s like a toolbox that makes it way easier to build a web server, especially for frontends, without drowning in custom code. Most modern web applications use some kind of web framework. Here are a few you might know:

• Django or Flask for Python
• Ruby on Rails for Ruby
• Laravel for PHP
• Spring for Java

As React gained popularity, Next.js emerged as a React-specific web framework (others include Create React App, Gatsby, etc.).

What makes it cool is that Vercel, being the brains behind Next.js, seamlessly blends it into their commercial product. This integration brings some smart performance boosts. Plus, every function in the “api” folder magically transforms into a serverless function in Vercel, providing an easy way to build a backend without breaking a sweat.

Vercel’s Frontend Cloud: More Than Just Deployment

Vercel is not just about deploying your frontend — it has grown into a full-fledged frontend cloud offering various features to support your entire application:

1. Edge Functions:
— Run server-side or backend code without the hassle. Perfect for tasks like authentication and experimentation.

2. Analytics:
— Get insights into your site’s performance and accessibility through statistics and dashboards.

3. CLI / API:
— Interact with Vercel programmatically. Run deployments, perform checks, and more with ease.

Edge Functions Highlight

The real game-changer here is Edge Functions. Unlike typical serverless functions confined to one geographical region, Vercel’s implementation has them running globally. Their team claims it’s faster and more cost-effective.

Evolution to a Frontend Cloud

While most significant applications are still manually deployed on servers, Vercel is paving the way. It might be more accurate to call it a frontend cloud — a collection of services centered around the frontend that simplifies app development. Recent additions include:

- Storage (Vercel Blob):
— Easy object storage for files and videos, strategically placed across the globe close to your users.

- Databases:
— Managed databases, starting with a key-value store and Postgres.

Cloud with a Frontend Focus

Yes, Vercel is now a cloud, but it’s not your typical cloud. It focuses on the frontend, abstracting away the complexities of the backend. It provides managed infrastructure, allowing developers to build faster and easier.

Continuous Evolution

From its days as Zeit to its current form, Vercel has transformed from a simple frontend deployer into a comprehensive platform for building and running entire applications. Exciting times in the world of Vercel!