Deploying React AppsEntry 8 of 11

Deploying to a Static Host

Uploading the build output to a host that serves static files, here Firebase Hosting (the course example).

Notes

  • Any static host works: Firebase Hosting, Netlify, Vercel, Cloudflare Pages, GitHub Pages, AWS S3 + CloudFront.
  • Firebase setup:
    1. Install the CLI: npm install -g firebase-tools.
    2. firebase login.
    3. firebase init → choose Hosting, select the project, set the public directory to dist, answer Yes to "Configure as a single-page app," and No to overwriting index.html.
    4. npm run build, then firebase deploy.
  • firebase hosting:disable takes the site offline.
  • Most hosts can also deploy automatically from a Git push.

What / Why / When

What

Publishing the static files.

Why

Static hosts are cheap or free, fast (CDN), and handle HTTPS.

When

For client-rendered SPAs.

Code compare

React
npm install -g firebase-toolsfirebase loginfirebase init          # Hosting, public dir: dist, single-page app: Yesnpm run buildfirebase deploy

The same steps, with the public directory set to dist/<project>/browser. Alternatively, ng add @angular/fire adds an ng deploy command.

Angular
ng buildfirebase deploy

Quick reference

TaskReactAngular
Public directorydistdist/<project>/browser
Deployfirebase deployfirebase deploy / ng deploy