Deploying React Apps

React ↔ Angular reference. React examples use React 19 + TypeScript, Vite, and React Router's Data Router API (v7; in v6 import from react-router-dom). Angular examples use modern Angular (standalone components, signals, inject(), @if/@for) with the Angular CLI.

Test yourself

13 questions

1
Deployment Steps
Deploying turns the development app into optimized static files and puts them on a server where users can reach them.
2
Lazy Loading Components with lazy()
React.lazy() loads a component's code only when it's first rendered, instead of bundling it into the initial download.
3
Lazy Loading Route Loaders with import()
When a lazy page also exports a loader, the route's loader must load that module with import() too, then call the loader from it.
4
Fallback UI with <Suspense>
<Suspense> shows a fallback while a lazy component's code downloads.
5
The Route lazy Property
A modern alternative to Entries 2–4: the route's lazy function imports the page module and returns its Component, loader, and action together.
6
Building for Production
The build command compiles, bundles, minifies, and tree-shakes the app into static files ready to deploy.
7
Environment Variables
Build-time values (API URLs, feature flags) that differ between development and production.
8
Deploying to a Static Host
Uploading the build output to a host that serves static files, here Firebase Hosting (the course example).
9
Server Rewrites for Client-Side Routing
A server rule that returns index.html for every URL that isn't a real file, so the client-side router can handle it.
10
Deploying Under a Sub-Path
Configuring the app to run at a path like example.com/my-app/ instead of the domain root.
11
Summary