Introduction
One of the popular website hosting services for front-end websites is Vercel.
This guide gives an overview of Vercel on what it is, what features it provides, how to create a Vercel account, and how to set up a simple front-end website to host.
Vercel
What is Vercel?
Vercel is a website hosting service specific to frontend-only websites built with JavaScript / TypeScript.
There is also support for backend services such as serverless functions that frontend websites can use via API calls to run code on the server.
Database and file storage options can be used inside the serverless functions.
As this is a cloud-based service websites are managed online via your account.
It's stated that they provide 99% uptime and caching to ensure the website is still available despite server features that may stop working.
100 edge locations are used which are servers located in various parts of the world as a way to improve speed. This means that whenever someone connects to your website the web server closest to their location is used ensuring a fast connection time.
Vercel has support for popular front-end libraries and technologies. Here is the list of them.
- Next.js
- React
- Nuxt.js
- Svelte
- Vue.js
- Gatsby
- Astro
- Angular
- Vite
Also, the popular backend programming language Python is supported and can be used for serverless functions in Vercel.
Vercel makes it easy to set up and deploy your projects as the library/framework will get detected and the commands for that technology will automatically be set up for builds and deployments.
Vercel has the following tiers for their packages listed on their pricing page.
- Hobby - Free
- Pro - $20 per user/month
- Enterprise - Custom pricing
To newcomers starting off hosting websites the free package offers everything needed and you could get away with not having to upgrade to the next package as the free package offers many features.
Scrolling down further on the pricing page you can see comparisons on all the features provided.
The following features that you need to know about are provided for the free tier.
- Bandwidth: 100 GB
- Build Execution: 6000 minutes
- Edge Functions: 500,000 executions
- Serverless Function Execution: 100 GB hours
These limits are sufficient if you are new to web hosting and want to start hosting websites.
GitHub account
A service that hosts Git repositories is required, Vercel supports GitHub, GitLab, and BitBucket. For this guide, the service that will be used is GitHub, it's the most popular service out of the three.
You will need a GitHub account to follow this guide and set up the example developer website example.
Once logged into your GitHub account go to the devsites-static GitHub page and either clone the project or download the zip file.
Creating an account
Now that you are signed in to GitHub you can begin registering a Vercel account.
Go to the signup page, select Hobby or Pro, enter a username, and press the Continue button.
You can use an existing GitHub, GitLab, or BitBucket account to register the Vercel account.
Use either the Continue with GitHub option or Continue with Email option, the latter option will be used for this guide.
Enter your email address to register with the Vercel account and press the Continue with Email button.
The account will require email verification, login to your email account and verify the account to continue setup.
You should receive an e-mail almost instantly after registering the email address, opening the email, and clicking the Verify button.
If you see the email verification message click the Verify button.
Your account should now be set up, go to https://vercel.com to access the dashboard as you should be logged in.
Setup your first project
If your account is logged in you will be taken to a page to set up your first project.
Click the Import button within the Import Project option.
As this account was registered with an email the GitHub account will require to be connected to the Vercel account for Vercel to connect to GitHub to download Git repositories hosted on your GitHub account.
Make sure you are logged in to your GitHub account and click the Continue with GitHub button to connect to the GitHub account.
Go back to the GitHub account as Vercel requires permission to access the devsites-static Git repository downloaded or git cloned earlier in the guide.
Click the avatar icon in the top right corner of your GitHub account and then click the Settings option.
After the settings page has loaded click the Applications option on the left side menu.
You should see Vercel in the Applications list if the GitHub account was linked with Vercel successfully.
Click the Configure button next to the Vercel option.
Scroll down to the Repository access section, select the Only select repositories option, click Select repositories, add the devsites-static repository, and finally click the Save button to apply the change.
Go back to the Vercel website and the devsites-static site should be available, click the Import button to add the project.
You should be presented with a page like the below screenshot with the Configure Project panel.
Click on the Build and Output Settings area and add the following environment variable.
- Key: NEXT_PUBLIC_DEVPUSH_API
- Value: https://api.devpushprojects.com
Don't forget to click the Add button to add the environment variable.
After adding the environment variable click the Deploy button to start the project build.
In the deploy panel, you will see the steps for deployment, wait till all the steps are complete.
After the project has been built you will be presented with a page showing a screenshot of the website setup.
Click on the Continue to Dashboard button to go back to the Dashboard.
On the project dashboard page the URL for the website is available, click on the link under the Domains text to view the website to make sure it's working.
The project should look similar to the image below and the categories should be clickable which filters the websites based on the selected category.
As you click the category links you will notice the speed at which the pages load and that there are no API requests made as the pages are all HTML/CSS and all the website data is added in during deployment.
Project sections
The deployments section all the deployments made for the project including each deployment status and filtering for different environments.
Web analytics shows statistics such as web views and clicks of the website, the free account does provide analytics however there are limitations such as page views having a maximum limit of 2500.
More info on pricing is available on the web analytics pricing page.
Speed insights provide info on the performance offering various scores and metrics.
Logs will detail logs for serverless and edge functions.
The following database/file storage options are available.
- KV: Key / Value Redis store
- Postgres: Vercel's version of Postgresql
- Blob: File storage
- Edge Config: Global data store
The project settings are where you would manage domains, environment variables, Git integration, functions, and cronjobs for your project.
Conclusion
After going through this guide you have now set up a Vervel account, and become familiar with setting up projects after going through the setup for the example devsites project, being shown an overview of the Vercel dashboard and project pages.
Vercel is a great choice for a web host for your frontend websites because of its ease of use and free tier account which is sufficient for hosting small websites.