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

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! 🚀