DEV Community

codeek
codeek

Posted on

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

#node #react #webdev #firebase

Deploying your application is one of the most exciting parts of web development. After spending hours building features, authentication, payments, and dashboards, it’s finally time to make your application accessible to everyone.

In this guide, you'll learn how to deploy a modern full-stack application where:

  • ⚛️ React (Vite) is hosted on Firebase Hosting
  • 🚀 Express.js backend is deployed on Render
  • 🗄️ PostgreSQL (Neon/Supabase or any hosted database) remains online
  • 🔒 Environment variables stay secure
  • 🌍 Your frontend communicates with your backend in production

By the end of this tutorial, you'll have a production-ready deployment pipeline suitable for portfolios, personal projects, and even startup MVPs.

🏗️ Final Architecture 

Users
   │
   ▼
Firebase Hosting (React)
   │
HTTPS API Requests
   │
   ▼
Render (Express API)
   │
   ▼
Database (Neon/PostgreSQL)
Enter fullscreen mode Exit fullscreen mode

Separating the frontend and backend makes your application easier to scale, maintain, and deploy independently.

📋 Prerequisites

Before starting, make sure you have:

  • Node.js installed
  • Firebase account
  • Render account
  • GitHub repository
  • Production database (Neon, Supabase, PostgreSQL, etc.)
  • React frontend
  • Express backend

Example project structure:

Ecommerce/
│
├── client/
│   ├── src/
│   ├── public/
│   └── package.json
│
└── server/
    ├── controllers/
    ├── routes/
    ├── middleware/
    ├── app.js
    └── package.json
Enter fullscreen mode Exit fullscreen mode

🤔 Why Firebase + Render?

This combination is perfect for modern React applications.

🔥 Firebase Hosting

  • Global CDN
  • HTTPS by default
  • Extremely fast
  • Easy deployment
  • Excellent for React/Vite projects

🚀 Render

  • Free starter tier
  • Automatic GitHub deployments
  • Environment variable support
  • SSL included
  • Great Express support

Step 1 — Prepare Your Backend

Before deployment, make sure your backend works locally.

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Visit:

http://localhost:5000
Enter fullscreen mode Exit fullscreen mode

Ensure your API responds correctly.

Step 2 — 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
Enter fullscreen mode Exit fullscreen mode

Never commit this file.

Instead, add it to .gitignore.

.env
Enter fullscreen mode Exit fullscreen mode

Step 3 — 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,
  })
);
Enter fullscreen mode Exit fullscreen mode

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

Step 4 — Push Your Backend to GitHub

Initialize Git if necessary.

git init
Enter fullscreen mode Exit fullscreen mode

Commit your project.

git add .
git commit -m "Initial deployment"
Enter fullscreen mode Exit fullscreen mode

Push to GitHub.

git push origin main
Enter fullscreen mode Exit fullscreen mode

Step 5 — Deploy Express Backend to Render

Login to Render.

Create:

New +
Enter fullscreen mode Exit fullscreen mode

Choose:

Web Service
Enter fullscreen mode Exit fullscreen mode

Connect your GitHub repository.

Select your backend repository.

Build Command 

npm install
Enter fullscreen mode Exit fullscreen mode

Start Command 

npm start
Enter fullscreen mode Exit fullscreen mode

or

node app.js
Enter fullscreen mode Exit fullscreen mode

depending on your project.

Root Directory

If your backend lives inside:

server
Enter fullscreen mode Exit fullscreen mode

Set:

Root Directory = server
Enter fullscreen mode Exit fullscreen mode

Environment Variables

Add every variable from your .env.

Example:

DATABASE_URL
JWT_SECRET
STRIPE_SECRET_KEY
CLIENT_URL
Enter fullscreen mode Exit fullscreen mode

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

Step 6 — 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
Enter fullscreen mode Exit fullscreen mode

Test it.

Example:

https://your-api.onrender.com/api/products
Enter fullscreen mode Exit fullscreen mode

If you receive JSON…

🎉 Congratulations! Your backend is live.

Step 7 — Update Frontend API URL

Instead of:

axios.get("http://localhost:5000/api/products");
Enter fullscreen mode Exit fullscreen mode

Use environment variables.

VITE_API_URL=https://your-api.onrender.com
Enter fullscreen mode Exit fullscreen mode

Create an Axios instance.

import axios from "axios";

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

Now your frontend automatically switches between development and production.

Step 8 — Prepare React for Production

Install Firebase CLI.

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

Login.

firebase login
Enter fullscreen mode Exit fullscreen mode

Initialize hosting.

firebase init hosting
Enter fullscreen mode Exit fullscreen mode

Choose:

Existing Firebase Project
Hosting
Enter fullscreen mode Exit fullscreen mode

For the public directory enter:

dist
Enter fullscreen mode Exit fullscreen mode

When prompted:

Single Page Application?
Enter fullscreen mode Exit fullscreen mode

Choose:

Yes
Enter fullscreen mode Exit fullscreen mode

Do not overwrite index.html.

Step 9 — Build React 

npm run build
Enter fullscreen mode Exit fullscreen mode

This generates:

dist/
Enter fullscreen mode Exit fullscreen mode

Your production build is ready.

Step 10 — Deploy to Firebase 

firebase deploy
Enter fullscreen mode Exit fullscreen mode

Firebase provides:

https://your-project.web.app
Enter fullscreen mode Exit fullscreen mode

and

https://your-project.firebaseapp.com
Enter fullscreen mode Exit fullscreen mode

Your React application is now served globally over HTTPS.

Step 11 — Update Backend CORS

Replace:

origin: ["http://localhost:5173"];
Enter fullscreen mode Exit fullscreen mode

with:

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

Redeploy your backend.

Step 12 — 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_
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Fix

Add your Firebase domain to Express CORS.

API Not Found 

404
Enter fullscreen mode Exit fullscreen mode

Check your Axios baseURL.

Blank React Screen

Usually:

npm run build
Enter fullscreen mode Exit fullscreen mode

failed.

Always build locally first.

Environment Variables Missing

Restart your Render service after updating environment variables.

Wrong Build Folder

For Vite, use:

dist
Enter fullscreen mode Exit fullscreen mode

not

build
Enter fullscreen mode Exit fullscreen mode

✅ 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
  • 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

https://www.youtube.com/watch?v=3LMJjIwZDx0&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=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! 🚀

Top comments (0)