Vercel was born out of the idea that deploying a website could be much simpler. You only have to run a single command:
vercel
– that is all.Not only did Vercel make deployments effortless, it made them scalable and global by default. Thanks to monorepo support, you could develop static websites and serverless functions within the same repository.
Today, we are excited to announce one command to run it all on localhost:
vercel dev
.Single-Command Local Development
Typically, developing a website or application involves a series of steps:
- Cloning repositories
- Fetching packages
- Synchronizing and matching ports
- Downloading the right runtime for each programming language
- And so on...
Even for modern projects, we often need to look up the
README.md
file for instructions about installing dependencies, and then tell a package manager to run developer scripts.Vercel gives you a different contract. It is always
vercel dev
.No More Control+C
When you work with servers, the developer workflow is quite tedious. You have to run a process, find the port, then make your changes, then kill the process (usually with Control+C)...
When you work with modern frontend frameworks (like Next.js or Gatsby) your HTML, CSS and client-side JavaScript, hot-reloading is expected instead.
When you introduce API endpoints written as serverless functions, we now also have the advantage of bringing live reloading to your backend.
vercel dev
ensures that every single request builds and runs the latest version of your code (yes, like .php
for every language).Zero Lock-In
Vercel ensures that you write code with the same open and standard APIs of your programming language or framework of choice.
Whether it is Next.js pages, Node.js HTTP request handlers or Express.js endpoints – we ensure that your code remains agnostic and portable.
Next.js and Typescript Functions
Unlike the
next dev
command, vercel dev
allows you to run your entire suite of web apps and APIs all at once, with just a single command.For example, the application shown below uses both a Next.js frontend and a Node.js API – both running at the same time using
vercel dev
:Gatsby and Node.js Functions
If you are building a static site using a tool like Gatsby, all you need to do is add the command you would normally use to a
dev
script in package.json
...{ "scripts": { "dev": "gatsby develop -p $PORT" } }
Once that is completed, the tool (in this case
gatsby develop
) is invoked automatically.The Gatsbygram example showcases this really well:
Go Functions with Static HTML
If you chose to write a backend in Go, there are no changes to be made in order for your project to work with
vercel dev
, you just run the command:Node.js and Headless Chrome
Even if your application is spawning a instance of Headless Chrome (like puppeteer), local development will be very smooth, as
vercel dev
emulates production closely:Static Sites
As a bonus, you will be glad to know that
vercel dev
also acts as a substitute for serve out of the box. Any time you want to serve a directory quickly, you know what to reach for:Get Started
vercel dev
is available in beta as part of the latest version of Vercel CLI.If you need a quick project to test it with, try
vercel init
:vercel init nextjs cd nextjs
and then...
vercel dev
For more details, check out its documentation including the list of optimized frameworks.
Let Us Develop Together
We want to hear from you and have set up a dedicated feedback form to learn more about the different ways in which you would like to see
vercel dev
improve: Which technologies, platforms and frameworks you would like us to support, or any hiccups or slow paths you run into.Furthermore, we also set up a FAQ page containing several common questions that might come up when using
vercel dev
and their answers.And as always, you are invited to join our community and drop the team a note.