Page 3: Building for Production

3. Building for Production

Once development is complete, a build process is necessary to transform your web application into a deployable format. Vite, powered by Rollup, generates optimized output.

3.1. Running the Build Command

Execute the following command in your project directory to perform a production build:

npm run build

This command optimizes, bundles, and minifies your source code, creating static files (HTML, CSS, JavaScript) in the dist directory.

3.2. Inspecting the Build Output

Upon successful completion of the build, a dist directory will be created in your project root. The files inside this directory are the final artifacts to be deployed to a web server.

dist/
├── index.html
├── assets/
│   ├── index-XXXXXX.js       # Bundled JS (with hash)
│   ├── index-XXXXXX.css      # Bundled CSS (with hash)
│   └── react-XXXXXX.svg      # Static assets like images

The hash (-XXXXXX) included in the filenames is for efficient browser caching. If the file content changes, the hash also changes, ensuring browsers fetch the new version.

3.3. Testing the Built App Locally

Before actual deployment, to verify that your built output works correctly, you can use the npm run preview command. This command starts a simple local server that serves the dist directory.

npm run preview