Top Related Projects
The Firebase Command Line Tools
Heroku's buildpack for Node.js applications.
The AWS Amplify CLI is a toolchain for simplifying serverless web and mobile development.
⛅️ Home to Wrangler, the CLI for Cloudflare Workers®
Quick Overview
Vercel is a cloud platform for static and serverless deployment. It provides a seamless way to deploy web projects with zero configuration, automatic SSL, and global CDN. Vercel specializes in frontend frameworks and static sites, offering instant deployments and scalability.
Pros
- Zero-config deployments for popular frameworks (Next.js, React, Vue, etc.)
- Automatic SSL and global CDN for fast, secure content delivery
- Serverless functions support for backend logic
- Seamless integration with Git for continuous deployment
Cons
- Limited customization options compared to traditional hosting
- Potential vendor lock-in for some features
- Free tier limitations may require upgrades for larger projects
- Learning curve for developers new to serverless architecture
Getting Started
To get started with Vercel:
-
Install the Vercel CLI:
npm i -g vercel
-
Navigate to your project directory and run:
vercel
-
Follow the prompts to link your project and deploy.
-
For subsequent deployments, simply push to your linked Git repository or run
vercel
again.
For more advanced configurations, create a vercel.json
file in your project root:
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/next"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
This example configures a Next.js project with custom routing. Adjust the settings based on your project's needs.
Competitor Comparisons
The Firebase Command Line Tools
Pros of Firebase Tools
- More comprehensive backend services, including real-time database and authentication
- Extensive CLI capabilities for managing Firebase projects and deployments
- Strong integration with Google Cloud Platform services
Cons of Firebase Tools
- Steeper learning curve due to more complex ecosystem
- Less focus on edge computing and serverless functions compared to Vercel
- Potentially higher costs for large-scale applications
Code Comparison
Firebase Tools deployment:
firebase init
firebase deploy
Vercel deployment:
vercel
Firebase Tools offers more granular control over project initialization and deployment, while Vercel provides a simpler, more streamlined deployment process.
Firebase Tools configuration (firebase.json):
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
}
Vercel configuration (vercel.json):
{
"version": 2,
"builds": [{ "src": "package.json", "use": "@vercel/static-build" }]
}
Firebase Tools configuration allows for more detailed customization of hosting settings, while Vercel's configuration is typically simpler and more focused on deployment specifics.
Heroku's buildpack for Node.js applications.
Pros of heroku-buildpack-nodejs
- More flexible and customizable for Node.js applications
- Supports a wider range of Node.js versions and package managers
- Better suited for complex, enterprise-level Node.js deployments
Cons of heroku-buildpack-nodejs
- Requires more configuration and setup compared to Vercel
- Less integrated with frontend frameworks and static site generators
- Slower deployment process, especially for small projects or quick iterations
Code Comparison
heroku-buildpack-nodejs:
{
"engines": {
"node": "14.x"
},
"scripts": {
"start": "node server.js"
}
}
Vercel:
{
"builds": [
{ "src": "*.js", "use": "@vercel/node" }
],
"routes": [
{ "src": "/(.*)", "dest": "/" }
]
}
The heroku-buildpack-nodejs example shows a typical package.json
configuration, specifying the Node.js version and start script. The Vercel example demonstrates a vercel.json
configuration file, which defines build settings and routing for serverless deployments.
While heroku-buildpack-nodejs offers more flexibility for complex Node.js applications, Vercel provides a simpler, more streamlined deployment process for frontend and serverless projects. The choice between the two depends on the specific requirements of your application and development workflow.
The AWS Amplify CLI is a toolchain for simplifying serverless web and mobile development.
Pros of Amplify CLI
- More comprehensive AWS service integration, including databases, authentication, and analytics
- Supports multiple programming languages and frameworks
- Offers local testing and emulation of AWS services
Cons of Amplify CLI
- Steeper learning curve due to AWS-specific concepts and terminology
- Limited to AWS ecosystem, less flexibility for multi-cloud deployments
- Can be more complex for simple projects compared to Vercel's streamlined approach
Code Comparison
Amplify CLI (initializing a project):
amplify init
amplify add api
amplify push
Vercel (deploying a project):
vercel
Key Differences
- Amplify CLI focuses on full-stack AWS development, while Vercel emphasizes frontend deployment and serverless functions
- Amplify CLI requires more configuration but offers deeper AWS integration
- Vercel provides a simpler deployment process with automatic CI/CD
- Amplify CLI supports a wider range of backend services, while Vercel excels in static site and JAMstack deployments
Both tools have their strengths, with Amplify CLI being more suitable for complex AWS-based projects and Vercel offering a streamlined experience for frontend-focused deployments.
⛅️ Home to Wrangler, the CLI for Cloudflare Workers®
Pros of Workers-SDK
- More flexible runtime environment, supporting multiple languages and custom builds
- Tighter integration with Cloudflare's global network and services
- Better suited for compute-intensive tasks and edge computing
Cons of Workers-SDK
- Steeper learning curve, especially for developers new to edge computing
- More complex configuration and deployment process
- Limited free tier compared to Vercel's generous free offerings
Code Comparison
Workers-SDK:
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
return new Response('Hello World!')
}
Vercel:
module.exports = (req, res) => {
res.status(200).send('Hello World!')
}
Key Differences
- Workers-SDK uses a service worker-like model, while Vercel follows a more traditional serverless function approach
- Workers-SDK offers more granular control over request handling
- Vercel's deployment process is generally simpler and more straightforward
- Workers-SDK provides better performance for globally distributed applications due to Cloudflare's extensive network
Use Cases
-
Choose Workers-SDK for:
- Edge computing applications
- Globally distributed, low-latency services
- Projects requiring deep integration with Cloudflare's ecosystem
-
Choose Vercel for:
- Quick deployments of static sites and serverless functions
- Projects built with popular frameworks like Next.js or React
- Teams preferring a simpler, more opinionated deployment process
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Vercel
Develop. Preview. Ship.
Documentation · Changelog · Templates · CLI
Vercel
Vercelâs Frontend Cloud provides the developer experience and infrastructure to build, scale, and secure a faster, more personalized Web.
Deploy
Get started by importing a project or using the Vercel CLI. Then, git push
to deploy.
Documentation
For details on how to use Vercel, check out our documentation.
Contributing
This project uses pnpm to install dependencies and run scripts.
You can use the dev
script to run local changes as if you were invoking Vercel CLI. For example, vercel deploy --cwd=/path/to/project
could be run with local changes with pnpm dev deploy --cwd=/path/to/project
.
When contributing to this repository, please first discuss the change you wish to make via GitHub Discussions with the owners of this repository before submitting a Pull Request.
Please read our Code of Conduct and follow it in all your interactions with the project.
Local development
This project is configured in a monorepo, where one repository contains multiple npm packages. Dependencies are installed and managed with pnpm
, not npm
CLI.
To get started, execute the following:
git clone https://github.com/vercel/vercel
cd vercel
corepack enable
pnpm install
pnpm build
pnpm lint
pnpm test-unit
Make sure all the tests pass before making changes.
Running Vercel CLI Changes
You can use pnpm dev
from the cli
package to invoke Vercel CLI with local changes:
cd ./packages/cli
pnpm dev <cli-commands...>
See CLI Local Development for more details.
Verifying your change
Once you are done with your changes (we even suggest doing it along the way), make sure all the tests still pass by running:
pnpm test-unit
from the root of the project.
If any test fails, make sure to fix it along with your changes. See Interpreting test errors for more information about how the tests are executed, especially the integration tests.
Pull Request Process
Once you are confident that your changes work properly, open a pull request on the main repository.
The pull request will be reviewed by the maintainers and the tests will be checked by our continuous integration platform.
Interpreting test errors
There are 2 kinds of tests in this repository â Unit tests and Integration tests.
Unit tests are run locally with jest
and execute quickly because they are testing the smallest units of code.
Integration tests
Integration tests create deployments to your Vercel account using the test
project name. After each test is deployed, the probes
key is used to check if the response is the expected value. If the value doesn't match, you'll see a message explaining the difference. If the deployment failed to build, you'll see a more generic message like the following:
[Error: Fetched page https://test-8ashcdlew.vercel.app/root.js does not contain hello Root!. Instead it contains An error occurred with this application.
NO_STATUS_CODE_FRO Response headers:
cache-control=s-maxage=0
connection=close
content-type=text/plain; charset=utf-8
date=Wed, 19 Jun 2019 18:01:37 GMT
server=now
strict-transport-security=max-age=63072000
transfer-encoding=chunked
x-now-id=iad1:hgtzj-1560967297876-44ae12559f95
x-now-trace=iad1]
In such cases, you can visit the URL of the failed deployment and append /_logs
to see the build error. In the case above, that would be https://test-8ashcdlew.vercel.app/_logs
The logs of this deployment will contain the actual error which may help you to understand what went wrong.
Running integration tests locally
While running the full integration suite locally is not recommended, it's sometimes useful to isolate a failing test by running it on your machine. To do so, you'll need to ensure you have the appropriate credentials sourced in your shell:
- Create an access token. Follow the insructions here https://vercel.com/docs/rest-api#creating-an-access-token. Ensure the token scope is for your personal account.
- Grab the team ID from the Vercel dashboard at
https://vercel.com/<MY-TEAM>/~/settings
. - Source these into your shell rc file:
echo 'export VERCEL_TOKEN=<MY-TOKEN> VERCEL_TEAM_ID=<MY-TEAM-ID>' >> ~/.zshrc
From there, you should be able to trigger an integration test. Choose one that's already isolated to check that things work:
cd packages/next
Run the test:
pnpm test test/fixtures/00-server-build/index.test.js
@vercel/nft
Some of the Builders use @vercel/nft
to tree-shake files before deployment. If you suspect an error with this tree-shaking mechanism, you can create the following script in your project:
const { nodeFileTrace } = require('@vercel/nft');
nodeFileTrace(['path/to/entrypoint.js'], {
ts: true,
mixedModules: true,
})
.then(o => console.log(o.fileList))
.then(e => console.error(e));
When you run this script, you'll see all the imported files. If files are missing, the bug is in @vercel/nft and not the Builder.
Deploy a Builder with existing project
Sometimes you want to test changes to a Builder against an existing project, maybe with vercel dev
or actual deployment. You can avoid publishing every Builder change to npm by uploading the Builder as a tarball.
- Change directory to the desired Builder
cd ./packages/node
- Run
pnpm build
to compile typescript and other build steps - Run
npm pack
to create a tarball file - Run
vercel *.tgz
to upload the tarball file and get a URL - Edit any existing
vercel.json
project and replaceuse
with the URL - Run
vercel
orvercel dev
to deploy with the experimental Builder
Reference
Top Related Projects
The Firebase Command Line Tools
Heroku's buildpack for Node.js applications.
The AWS Amplify CLI is a toolchain for simplifying serverless web and mobile development.
⛅️ Home to Wrangler, the CLI for Cloudflare Workers®
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot