DEV Community

loading...
Cover image for How to deploy a React App to Vercel host for free

How to deploy a React App to Vercel host for free

XinyuStudio
・2 min read

Vercel combines the best developer experience with an obsessive focus on end-user performance, which enables frontend teams to do their best work.

This post outlines how to deploy React App to Vercel host for free. You might be interested in other free deployment options:


# Deploy React Apps on Vercel

Create react app

npx create-next-app project-name
cd project-name

yarn
yarn dev
Enter fullscreen mode Exit fullscreen mode

Install Vercel tools CLI

The Vercel command-line interface enables instant cloud deployment and local development.

npm i -g vercel
Enter fullscreen mode Exit fullscreen mode

Login Vercel using CLI

vercel login
Enter fullscreen mode Exit fullscreen mode

You will be prompted to enter an email, where a link will redirect you to a verification page. Click the VERIFY button to proceed.

After this, you will see below result in CLI:


Setup Vercel project from CLI

Note: you can also create a project using Vercel console, but using CLI is more convenient.

  1. Run the below command
cd project-name
vercel 
Enter fullscreen mode Exit fullscreen mode

You need cd into the folder where React App is created. Follow the instructions as shown below:

  1. Confirm YES.
  2. Create a new Vercel project, by typing "y".
  3. Input a project ID, e.g. "xyz-vercel", choose a directory where the code resides.
  4. Overwrite the default settings if needed.
  5. You might wish to override the build command if necessary

After a few seconds, your app will be deployed to Vercel and a URL will be given: e.g. https://xyz-vercel.vercel.app/


Open a browser window, and type the url: https://xyz-vercel.vercel.app/

Now, your app is deployed to Vercel! Happy coding, happy deploying!

Discussion (0)