How to deploy a React App to Vercel host for free

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:

• How to deploy a React App to Firebase host for free
• How to deploy a React App to Cloudflare host for free

---

# Deploy React Apps on Vercel

• Demo Site: https://xyz-vercel.vercel.app/
• Github repo here

Create react app

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

yarn
yarn dev

Install Vercel tools CLI

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

npm i -g vercel

---

Login Vercel using CLI

vercel login

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 

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!

Comments

[amirmohammadrazmy]

It was realy helful. Thanks!

[Faisal Amin]

Do we need to push node modules also, if we want to deploy on Vercel ?

[Ankit parte]

no need to push node modules

[Ridwan]

Thank you for sharing