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
- Go to comand sign up (you can use GitHub to sign in).
- Click “Add New Site” → “Import an existing project”.
- Connect your GitHub repo (make sure your React app is pushed there).
- In Build Command, write: npm run build
- In Publish directory, write: build
- Click Deploy Site— and then it’s live!
Option 2: Vercel
- Go to com
- Sign up and connect your GitHub.
- Import the frontend repo.
- 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:
- Go to comand sign up.
- Click on “New” → “Web Service”.
- Connect your GitHub and select your backend repo.
- 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!)
- 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
And that’s it! You’ve now deployed a full stack React app and that too for free! The thing is that these tools are perfect for students, freelancers, or anyone starting out. And If you are looking to get serious about this stuff and want to learn it professionally then you can consider joining a full stack development course in Kolkata. Red Apple Learning offers hands-on training, live projects, and even in-house placement backup with guaranteed placement support (which includes placement all across India). This course will helpful if you want to build a successful career in the IT sector.
