Building and Deploying: Serve the Right Runtime

A school app works with a development server, but uploading only App.jsx does not give users a working website. The host needs the built assets and the right routing or server runtime.

A build transforms source and dependencies into deployable output. Deployment serves that output in its required environment. A client-only React build can often use static hosting; an application with server rendering or Server Components needs its framework’s supported server deployment.

Understand
Distinguish development, build and local preview.
Build
Locate Vite’s default build output.
Check
Check direct routes, asset paths and real service configuration.

Source is transformed before the host serves it

Source
JSX and imports describe the application.
Build
The tool produces browser assets.
Host
The environment serves assets and required routes or server work.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

A build output is different from a development server

Vite’s development server transforms modules for local development. In a Vite React project, npm run build normally invokes the configured build command and writes a production output directory, dist by default. npm run preview serves that built result locally for inspection; it is not a general production hosting solution.

Your project’s package scripts and configuration are authoritative. A React framework can use a different output and server command. Do not assume every React project produces a static dist folder, especially when server-only code or request-time rendering is required.

Use a small client component to verify the delivered behavior

This client-only App displays a school name and a local attendance toggle. It needs no server data, so it is an appropriate small subject for a static client build. After deployment, test the actual button rather than only checking that the HTML page returns 200.

React · JavaScript with JSX

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  return <main><h1>River School</h1><p>Maya: {present ? 'present' : 'absent'}</p>
    <button onClick={() => setPresent(value => !value)}>Toggle attendance</button></main>;
}

Expected screen and behavior

A correctly delivered client build shows River School and changes Maya’s local attendance when clicked.

Build, preview and inspect a real Vite project

React · Use a small client component to verify the delivered behavior

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  return <main><h1>River School</h1><p>Maya: {present ? 'present' : 'absent'}</p>
    <button onClick={() => setPresent(value => !value)}>Toggle attendance</button></main>;
}

Terminal commands inside the React Vite practice project:

npm run build
npm run preview

Inspect the configured output and open the local preview address printed by the tool. Check the browser console, static asset requests and the interactive task. Upload the built output to a compatible static host if the application is client-only. The lesson page itself is not deploying that practice project for you.

Direct routes and configuration affect the deployed result

A BrowserRouter route such as /students/7 must still load when entered directly or refreshed. Configure the host’s documented single-page fallback to the built index.html for app routes while serving assets correctly. A server framework has its own routing behavior; do not replace its server with a blanket static fallback.

If hosted under a subpath, configure the build’s base path and router base consistently. Browser-visible environment variables are part of the client bundle and are not secret storage. A server API must implement its own authentication and authorization rather than trust client configuration.

Try the school task

React · starting example

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  return <main><h1>River School</h1><p>Maya: {present ? 'present' : 'absent'}</p>
    <button onClick={() => setPresent(value => !value)}>Toggle attendance</button></main>;
}

Add a clear local-only label to the attendance demo before building it. Verify that reloading resets the value, so users are not told their attendance was stored.

Worked answer

The label states the persistence boundary. The browser state disappears after reload because no storage or backend is used. The build transforms the source; it does not add persistence automatically.

React · JavaScript with JSX

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  return <main><h1>School deployment fixture</h1><p>Local preview only; changes are not saved</p>
    <p>Maya: {present ? 'present' : 'absent'}</p>
    <button onClick={() => setPresent(value => !value)}>Toggle attendance</button></main>;
}

Expected screen and behavior

The toggle works locally, but a reload starts absent again.

Mistakes and boundaries

Passing a build proves source can be transformed, not that remote APIs, permissions, routing or accessibility work. Verify the deployed routes and tasks in the actual environment.

Do not publish secrets through a client environment variable. Configuration exposed to the browser is visible to users regardless of its variable name.

Use the framework’s supported deployment guidance for request-time server features. A static host cannot execute arbitrary server components or server mutations merely because their source was uploaded.

React · Use a small client component to verify the delivered behavior

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  return <main><h1>River School</h1><p>Maya: {present ? 'present' : 'absent'}</p>
    <button onClick={() => setPresent(value => !value)}>Toggle attendance</button></main>;
}

Choose the answer that follows the data and the interaction, then read the explanation for each alternative.

Carry the idea forward

Build the configured output, verify it locally and deploy to the runtime the app requires. Apply this in the school project and review direct route behavior.

Read the primary reference: Vite: static deployment.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Student Directory Project: Combine Components, State and Practice →

Building and Deploying: Serve the Right Runtime