How to Deploy a React App (Vercel, Netlify, and Firebase Compared)

How to Deploy a React App (Vercel, Netlify, and Firebase Compared)

Deploying a React app is the last step of building. Here is how, comparing Vercel, Netlify, and Firebase Hosting.

The Build Step

Before deploying, run the production build command, usually npm run build. This creates an optimized, minified bundle in a build or dist folder, which is what you deploy.

Vercel

Vercel is the easiest for React apps. Connect your GitHub repo, and Vercel builds and deploys automatically on every push. It handles SSL, custom domains, and serverless functions. It is the default choice for many React developers.

Netlify

Netlify is similar: connect a repo, set the build command and publish directory, and it deploys on every push. It also handles SSL, custom domains, and serverless functions. A strong alternative to Vercel.

Firebase Hosting

Firebase Hosting is part of the Firebase ecosystem. If your app already uses Firebase for auth or database, Firebase Hosting is a natural fit. It serves static content from a global CDN and pairs well with other Firebase services.

Environment Variables

Set your environment variables in the hosting platform's dashboard, not in your code. Each platform has a settings page for this. Never commit secrets to your repo.

SPA Routing Consideration

For a React SPA with client-side routing, configure the host to redirect all routes to index.html, so deep links work. Vercel and Netlify usually handle this; otherwise add a rewrite rule.

The Takeaway

Build with npm run build, then deploy to Vercel, Netlify, or Firebase Hosting. Set environment variables in the dashboard, and configure SPA routing so deep links work. Vercel is the easiest default for React.