How to Deploy Full Stack React App for Free?

So, you have built your full stack React app…

• Front-end in React
• Backend in Node.js/ Express
• Maybe with MongoDB as the database

The app is working perfectly on your local machine. But now comes the big question—how do you show it to the world without spending money?

Don’t worry! In this blog, we will walk you through the easiest and free ways to deploy your full stack React app, step by step, using simple language. Whether you are just a student or someone just getting started with coding, this is for you!

Step 1: Prepare Your Project

Before deployment, make sure:

• Your frontend and backend are in separate folders (like client and server)
• Your backend server has a file like jsor index.js
• Your frontend React app runs smoothly using npm run build

Once that’s set, you are ready to roll!

Step 2: Deploy Frontend (React)

You may use  Netlify or Vercel as per your convenience

Option 1: Netlify

1. Go to comand sign up (you can use GitHub to sign in).
2. Click “Add New Site” → “Import an existing project”.
3. Connect your GitHub repo (make sure your React app is pushed there).
4. In Build Command, write: npm run build
5. In Publish directory, write: build
6. Click Deploy Site— and then it’s live!

Option 2: Vercel

1. Go to com
2. Sign up and connect your GitHub.
3. Import the frontend repo.
4. It auto-detects React. Just click Deploy!

Now you will need to deploy the backend (Node.js/ Express.js)

STEP 3: Deploy Backend with Render

Now that your frontend is live now it is your time for the backend

Steps:

1. Go to comand sign up.
2. Click on “New” → “Web Service”.
3. Connect your GitHub and select your backend repo.
4. Set up the configuration:

• Build Command:npm install
• Start Command:node server.js (or whatever your main file is)
• Choose the free plan (You don’t need to worry about it as the free one works fine!)
  5. Click Create Web Service

Render will give you a public URL where your backend is now hosted.

(Note: If your backend uses a database like MongoDB, use MongoDB Atlas – it’s free too!)

Step 4: Connect Frontend and Backend

In your frontend code, wherever you make API calls (like using axios or fetch), make sure the URL points to your Render backend link.

For example:

javascriptCopyEditaxios.get(“https://your-backend.onrender.com/api/users”)

Re-deploy the frontend again if needed.

TL; DR