Command Palette

Search for a command to run...

Hectal
Phase 23Advanced24 of 28 in React

Build, Deploy and Run in Production

What a build does, environment config, deploying with SPA fallbacks and cache headers, Core Web Vitals, error reporting with source maps, and upgrading React safely.

Writing components is half the job. The other half happens after you type npm run build: your JSX is turned into small files, those files are put on a server, real people on slow phones open them, and things break in ways you never saw on your laptop. This phase follows your app on that journey, from source code to a page that stays fast and healthy for months.

You'll see what a build really does (bundling, transpiling, tree shaking, minifying, source maps) by reading real Vite 8 output, then how configuration gets into the app at build time or at runtime, and why anything in the browser bundle is public. Then you'll deploy: static hosting, the SPA fallback that makes deep links work, Vercel, Netlify, Docker with nginx, and the caching headers that let hashed files be cached for a year while index.html is always fresh.

The last three topics are about running the app in production: measuring what users feel with Core Web Vitals (LCP, INP, CLS), catching and reporting errors with React's root error callbacks and source maps, collecting analytics without collecting people, and upgrading React without drama. Most of this is tooling, so the live examples show the runtime side: what tree shaking keeps, what import.meta.env turns into, a deep link with and without a fallback, real PerformanceObserver entries, and real React error callbacks.

0/6 · 0%
6 topics ~3 h 23 code blocks & diagrams
Start with the first topic
1
23.1

What a Build Does

A production build turns your many source files into a few small, fast files in dist/: it transpiles JSX and TypeScript, bundles modules together, removes code nothing uses (tree shaking), minifies what's left, names files by a hash of their content and can write source maps that point back to your original code.

30 min 4 code practice

2
23.2

Environment Variables and Configuration

Configuration such as an API address or a feature switch reaches a React app either at build time, when the build tool pastes VITE_ or NEXT_PUBLIC_ values into the bundle, or at runtime, when the app loads a config file as it starts; anything that reaches the browser is public, so secrets never belong there.

26 min 4 code practice

3
23.3

Deploying a React App

A client-side React app is a folder of static files, so any static host can serve it, as long as it answers unknown paths like /products/42 with index.html (the SPA fallback) and caches hashed assets for a year while always revalidating index.html; Vercel, Netlify and nginx in Docker each express those two rules in their own config.

28 min 4 code practice

4
23.4

Core Web Vitals and Bundle Size

Core Web Vitals are three numbers measured on real users: LCP (how soon the main content appears), INP (how quickly the page responds to taps and clicks) and CLS (how much the layout jumps); you measure them with PerformanceObserver or the web-vitals library, and improve them with smaller bundles, well-loaded images and fonts, reserved space and short main-thread tasks.

27 min 3 code practice

5
23.5

Monitoring and Error Reporting

In production you can't see your users' consoles, so errors must report themselves: React 19's root callbacks (onCaughtError, onUncaughtError, onRecoverableError) plus window error and unhandledrejection listeners send every crash to an error tracker, source maps turn its minified stack traces back into your code, and analytics and logs are collected with consent and without personal data.

27 min 4 code practice

6
23.6

Upgrading React and Keeping Current

React follows semantic versioning: patches fix bugs, minors add features, majors remove deprecated APIs after warning about them; you upgrade safely by reading the upgrade guide, moving to the last minor of your current major first, fixing every deprecation warning, running the official codemods, and keeping react, react-dom and @types/react in step.

25 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Only public variables reach the browser

env holds everything the build machine knows, secrets included. Finish publicEnv(all) so it returns only MODE and the variables whose names start with VITE_, the way Vite decides what goes into the bundle.

Intermediate
2

Write the SPA fallback rule

Finish host(path), a model of a static host serving dist/. It returns a string:

Intermediate
3

Rate Core Web Vitals at the 75th percentile

You have eight field samples for each metric. Finish two functions:

Intermediate
4

Send render errors to a reporter

When PriceTag crashes, the error boundary shows a fallback, but nobody is told. Pass onCaughtError (and onUncaughtError too) to createRoot so every render error is reported with report(kind, error, errorInfo).

Advanced
5

Mini build: recover from a failed chunk

After a deploy, the first attempt to load the Reports chunk fails (loadReports simulates it). Build the recovery:

Advanced