What is Vercel?
Vercel is a "Function as a Service" platform to allow anyone to build, launch, and maintain any site for... free! Although there are paid models all the functionality to get a site up and running is completely free and relatively simple to use.
Why is there a web components tag on this post?
Currently, to deploy a site testing out web components you need what feels like an entire infrastructure behind it just to see if a simple button is working the right way.
Now with Vercel's deployment, web components has never been easier!
Getting Started
First, create a Vercel account. I'd recommend creating the account with the Github option, so your Vercel account is linked to your repositories. I would also recommend only sharing projects you want to deploy with your Vercel account so that Vercel does not try to deploy with other repos.
How to Deploy
Importing the Project
There are two main ways to deploy your site with Vercel; using the Vercel CLI or through Github.
I'm going to explain the Github route since I personally think it is the best way to link your projects and keep them updated in Vercel.
All of the docs for alternative routes can be found on Vercel's documentation.
Now that you've linked your Github account to Vercel you will see a dashboard much like this without any existing projects.
Here you can click "New Project" and select the Github repository you want to deploy. If you've turned on the selective repo sharing, you will need to
- Select "Add Github Account" in the drop down
- Choose your Github account
- Scroll down to "Repository Access" and choose the repo you want to share
- Hit the "Save" button
- Hit the "Import" button on that project
Configuring
The best part of Vercel is most deployment configuration is done for you. The main three areas you need to edit next are "Root Directory", "Build and Output Settings", and "Environment Variables". Other than that... you're done.
To deploy a project with web components, you will need a rollup-config file along with a build command that runs that file.
If you need help with that configuration, check out the files in one of my Github repos
Deployed!
That's it! Hit the big "Deploy" button and watch your project come to life on a free site that is constantly updated with each push to your repo's main branch. There is no other updates needed on your side as Vercel will automatically rebuild your site with each new pull request.
Top comments (0)