Convert Figma logo to code with AI

vercel logovercel

Develop. Preview. Ship.

12,783
2,246
12,783
218

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:

  1. Install the Vercel CLI:

    npm i -g vercel
    
  2. Navigate to your project directory and run:

    vercel
    
  3. Follow the prompts to link your project and deploy.

  4. 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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:

  1. 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.
  2. Grab the team ID from the Vercel dashboard at https://vercel.com/<MY-TEAM>/~/settings.
  3. 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.

  1. Change directory to the desired Builder cd ./packages/node
  2. Run pnpm build to compile typescript and other build steps
  3. Run npm pack to create a tarball file
  4. Run vercel *.tgz to upload the tarball file and get a URL
  5. Edit any existing vercel.json project and replace use with the URL
  6. Run vercel or vercel dev to deploy with the experimental Builder

Reference

NPM DownloadsLast 30 Days