Building and Deploying a React Application

Development mode in React (via tools like Vite or Create React App) prioritizes fast feedback — hot reloading, unminified code, and helpful warnings — none of which belong in front of real users. Before deploying, a React app must be compiled into an optimized "production build": minified, bundled, and stripped of development-only warnings, ready to be served as static files.

Because React apps compiled this way are just HTML, CSS, and JavaScript files with no server-side logic required, they can be hosted on virtually any static file host or CDN, which is both simple and inexpensive compared to running a full application server.

Why it matters

An application on your own machine helps nobody. Deploying means building optimised static files, configuring values that differ between environments, and making sure a refresh on any page still works. Environment variables in a front end come with one rule that is a security matter: everything in the bundle is public.

Creating a Production Build

Running npm run build (the exact script name may vary slightly between Vite and Create React App, but the concept is identical) compiles the application into a small set of static files — typically an index.html plus hashed, minified JavaScript and CSS bundles — placed into a build or dist folder. This process removes development warnings, minifies code to reduce file size, and often splits code into smaller chunks so users only download what a given page needs.

Static Hosting Basics

Because the build output is just static files, it can be hosted on services like Netlify, Vercel, GitHub Pages, or any plain web server/CDN — no Node.js server is required to serve the app itself (a separate backend API, if any, is deployed independently). One routing detail matters for single-page apps: since React Router handles navigation client-side, the host must be configured to serve index.html for all unknown paths (a "rewrite" or "fallback" rule), otherwise refreshing a page like /users/42 directly will 404 on a naive static host.

Environment Variables

Configuration that differs between environments — an API base URL for staging versus production, for example — is handled through environment variables baked in at build time, not at runtime. In Vite projects these must be prefixed with VITE_ (e.g. VITE_API_URL) and accessed via import.meta.env.VITE_API_URL; in Create React App projects they must be prefixed with REACT_APP_ and accessed via process.env.REACT_APP_API_URL. Because these values are compiled directly into the static JavaScript bundle, they are visible to anyone who inspects the deployed files — secrets like private API keys must never be placed in frontend environment variables.

• Vite: variables must start with VITE_ and are read via import.meta.env.VITE_SOMETHING.
• Create React App: variables must start with REACT_APP_ and are read via process.env.REACT_APP_SOMETHING.
• Never store true secrets (private keys, database credentials) in frontend env variables — they end up readable in the shipped JavaScript.

Example

// .env.production (not committed with real secrets)
// VITE_API_URL=https://api.example.com

// apiClient.js
const API_BASE_URL = import.meta.env.VITE_API_URL;

export async function fetchProducts() {
  const response = await fetch(`${API_BASE_URL}/products`);
  if (!response.ok) {
    throw new Error('Failed to load products');
  }
  return response.json();
}

// Build and preview the production bundle locally:
// npm run build
// npm run preview

After "npm run build", a dist/ folder is created containing minified index.html, JS, and CSS files with VITE_API_URL already compiled in as "https://api.example.com". "npm run preview" serves that production build locally so you can verify it before deploying it to static hosting.

Exercise

Do this in a Vite + React project. Create a file named .env in the project root that defines the API address https://api.example.com in a variable the browser code is allowed to read. Read it in src/App.jsx and show it in a paragraph. Then write the two commands that create the production build and preview it locally.

Expected result: the page shows "API: https://api.example.com", and the build command creates a dist folder of static files.

# .env
# TODO: the API address, in a variable exposed to the client

// src/App.jsx
export default function App() {
  // TODO: read the variable
  return <p>API: </p>;
}

# terminal
# TODO: build for production
# TODO: preview the build

# .env
VITE_API_URL=https://api.example.com

// src/App.jsx
export default function App() {
  const apiUrl = import.meta.env.VITE_API_URL;
  return <p>API: {apiUrl}</p>;
}

# terminal
npm run build
npm run preview

Quick quiz

Interview questions