🚀 Deploy a Full Stack React Application (Firebase + Render) - Complete Deployment Guide (2026)

Prepare Your Backend

Before deployment, make sure your backend works locally.

npm install
npm run dev

Visit: http://localhost:5000

Ensure your API responds correctly.

Configure Environment Variables

Never hardcode secrets. Create a .env file:

PORT=5000
DATABASE_URL=your_database_url
JWT_SECRET=your_secret
STRIPE_SECRET_KEY=your_key
CLIENT_URL=http://localhost:5173

Never commit this file. Instead, add it to .gitignore:

.env

Configure CORS

When the frontend is hosted on Firebase, Express must allow requests from that domain.

app.use(
  cors({
    origin: [
      "http://localhost:5173",
      "https://your-app.web.app",
      "https://your-app.firebaseapp.com",
    ],
    credentials: true,
  })
);

Later you'll replace these URLs with your production Firebase domain.

Push Your Backend to GitHub

Initialize Git if necessary:

git init

Commit your project:

git add .
git commit -m "Initial deployment"

Push to GitHub:

git push origin main

Deploy Express Backend to Render

Login to Render. Create: New + Choose: Web Service. Connect your GitHub repository. Select your backend repository.

• Build Command: npm install
• Start Command: npm start or node app.js depending on your project
• Root Directory: If your backend lives inside server, set: Root Directory = server

Environment Variables: Add every variable from your .env. Example:

• DATABASE_URL
• JWT_SECRET
• STRIPE_SECRET_KEY
• CLIENT_URL

Render securely stores these values, so they are never committed to Git.

Wait for Deployment

Render will:

• Clone your repository
• Install dependencies
• Build the application
• Start the server

Eventually you'll receive: https://your-api.onrender.com

Test it. Example: https://your-api.onrender.com/api/products

If you receive JSON… 🎉 Congratulations! Your backend is live.

Update Frontend API URL

Instead of:

axios.get("http://localhost:5000/api/products");

Use environment variables:

VITE_API_URL=https://your-api.onrender.com

Create an Axios instance:

import axios from "axios";

export default axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

Now your frontend automatically switches between development and production.

Prepare React for Production

Install Firebase CLI:

npm install -g firebase-tools

Login:

firebase login

Initialize hosting:

firebase init hosting

• Choose: Existing Firebase Project
• Hosting: For the public directory enter: dist
• When prompted: Single Page Application? Choose: Yes
• Do not overwrite index.html

Build React

npm run build

This generates: dist/

Your production build is ready.

Deploy to Firebase

firebase deploy

Firebase provides: https://your-project.web.app and https://your-project.firebaseapp.com

Your React application is now served globally over HTTPS.

Update Backend CORS

Replace:

origin: ["http://localhost:5173"];

with:

origin: [
  "http://localhost:5173",
  "https://your-project.web.app",
  "https://your-project.firebaseapp.com",
];

Redeploy your backend.

Test Everything

Visit your Firebase URL and verify:

• ✅ Home page
• ✅ Authentication
• ✅ Login
• ✅ Register
• ✅ Products
• ✅ Categories
• ✅ Cart
• ✅ Orders
• ✅ Stripe Checkout
• ✅ Protected routes
• ✅ Logout

Open Developer Tools. There should be:

• ✅ No CORS errors
• ✅ No 404 errors
• ✅ Successful API requests

Production Tips

🔒 Use HTTPS Everywhere - Both Firebase and Render provide HTTPS by default. Never mix HTTP and HTTPS.

🔐 Keep Secrets Secure - Never expose: JWT Secret, Stripe Secret Key, Database URL. Only variables beginning with VITE_ should be exposed to the frontend.

🔄 Enable Automatic Deployments - Every push to GitHub can automatically trigger a deployment on Render, making continuous delivery effortless.

Common Deployment Errors

• CORS Error - Access-Control-Allow-Origin - Fix: Add your Firebase domain to Express CORS.
• API Not Found 404 - Check your Axios baseURL.
• Blank React Screen - Usually: npm run build failed. Always build locally first.
• Environment Variables Missing - Restart your Render service after updating environment variables.
• Wrong Build Folder - For Vite, use: dist not build

Deployment Checklist

• ✅ Backend deployed
• ✅ Database connected
• ✅ Environment variables added
• ✅ Firebase Hosting configured
• ✅ React built
• ✅ Axios uses production URL
• ✅ CORS updated
• ✅ HTTPS enabled
• ✅ Everything tested

Conclusion

Congratulations! You now have a fully deployed modern full-stack application with:

• ⚛️ React hosted on Firebase Hosting
• 🚀 Express running on Render
• 🗄️ PostgreSQL hosted online
• 🔒 Secure environment variables
• 🌍 Production-ready frontend/backend communication

This architecture is simple, scalable, and perfect for portfolios, personal projects, and startup MVPs. As your application grows, you can further improve it by adding: custom domains, CI/CD pipelines, monitoring, logging, Docker, and automated testing.

Happy coding! 🚀

Prefer Watching Instead?

This article accompanies Part 18 of my Modern React E-Commerce Series, where I walk through the complete deployment process step by step. In the video you'll learn:

• 🚀 Deploy an Express backend to Render
• 🔥 Host a React (Vite) frontend on Firebase Hosting
• 🌍 Configure production environment variables
• 🔐 Handle CORS correctly
• 🔄 Connect frontend and backend
• ✅ Deploy a real-world full-stack application from start to finish

If you're building along with the series, this lesson completes the journey by taking your application from local development to a live production deployment.

👉 Watch Part 18:

Continue Learning - Complete React E-Commerce Playlist

If you're interested in building a production-ready e-commerce application from scratch, check out the complete playlist on my YouTube channel Codeek. The series covers:

• ⚛️ Modern React
• 🎨 Chakra UI
• 🔄 React Query
• 📦 Zustand
• 💳 Stripe Payments
• 🗄️ Express.js Backend
• 🐘 PostgreSQL
• 🚀 Firebase Hosting
• ☁️ Render Deployment
• 📁 Project Architecture
• 🛒 Complete E-Commerce Development

Whether you're preparing for interviews, building your portfolio, or creating your next startup, this series walks you through every step with practical, real-world examples.

⭐ If you find the tutorials helpful, consider subscribing to Codeek and sharing the playlist with fellow developers. Happy coding! 🚀