How to deploy a React app to Firebase
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Firebase Hosting provides fast, secure hosting for React applications with global CDN distribution and automatic SSL certificates. With over 12 years of React development experience since 2014 and as the creator of CoreUI, I’ve deployed numerous applications to Firebase Hosting. Firebase offers a generous free tier, one-command deployments, and seamless integration with other Firebase services like authentication and databases. The deployment process uses Firebase CLI to build and deploy your React app to their global edge network.
Use Firebase CLI to deploy your React app to Firebase Hosting with automatic SSL and CDN distribution.
Install Firebase CLI:
npm install -g firebase-tools
Initialize Firebase in your project:
# Login to Firebase
firebase login
# Initialize Firebase
firebase init hosting
Select options:
- Choose “Use an existing project” or create new
- Set public directory to
build - Configure as single-page app: Yes
- Set up automatic builds with GitHub: Optional
Configure firebase.json:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(jpg|jpeg|gif|png|svg|webp)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
]
}
}
Deploy:
# Build your React app
npm run build
# Deploy to Firebase
firebase deploy
# Deploy only hosting
firebase deploy --only hosting
Add to package.json:
{
"scripts": {
"deploy": "npm run build && firebase deploy --only hosting"
}
}
Set up custom domain (optional):
firebase hosting:channel:deploy preview
Best Practice Note
The rewrites configuration ensures client-side routing works by serving index.html for all routes. Add cache headers for static assets to improve performance. Firebase automatically provides SSL certificates for custom domains. Use Firebase hosting channels for preview deployments before going to production. Each deploy gets a unique URL for testing. Enable GitHub Actions integration for automatic deployments on push. This is how we deploy CoreUI React demos—using Firebase Hosting for reliable global delivery with zero infrastructure management.
