Production Build

Learning objectives#

• Create and preview a production build
• Configure environment variables per mode
• Set the base path for sub-folder hosting
• Inspect and reduce bundle size

Explanation#

npm run build runs vite build: JSX is compiled, code is minified and tree-shaken, files get content hashes (index-3f9a1c.js) so browsers can cache them forever. Output goes to dist/.

npm run preview serves dist/ locally — always test the real build before deploying.

Environment variables: .env, .env.production and .env.development files. Only variables prefixed VITE_ reach the browser, via import.meta.env.VITE_API_URL. Never put secrets there — anything in the bundle is public.

If the app is served from a sub-folder (https://site.com/shop/), set base: "/shop/" in vite.config so asset URLs are correct.

Check bundle size with the build output and a visualiser (rollup-plugin-visualizer). Fix big chunks with lazy-loaded routes and lighter libraries.

Source maps (build.sourcemap) help debug production errors; upload them to your error tracker instead of serving them publicly if the code is sensitive.

Syntax#

1npm run build          # → dist/
2npm run preview        # test the build at http://localhost:4173
3# .env.production
4VITE_API_URL=https://api.shop.example.com

Code example: A production-ready vite.config.js#

1import { defineConfig, loadEnv } from 'vite';
2import react from '@vitejs/plugin-react';
3

4export default defineConfig(({ mode }) => {
5  const env = loadEnv(mode, process.cwd(), 'VITE_');
6

7  return {
8    plugins: [react()],
9    base: env.VITE_BASE_PATH || '/',            // e.g. "/shop/" for sub-folder hosting
10    build: {
11      outDir: 'dist',
12      sourcemap: mode === 'staging',            // maps only where you need to debug
13      chunkSizeWarningLimit: 600,
14      rollupOptions: {
15        output: {
16          manualChunks: { react: ['react', 'react-dom', 'react-router'] },   // stable vendor chunk
17        },
18      },
19    },
20    server: {
21      proxy: { '/api': 'http://localhost:4000' },   // dev only: avoids CORS
22    },
23  };
24});
25

26// src/config.js
27// export const API_URL = import.meta.env.VITE_API_URL;   // set in .env.production

npm run build prints each output file with its size, e.g. dist/assets/index-B2k9xQ.js 142 kB │ gzip: 46 kB and dist/assets/react-Cq81a.js 190 kB │ gzip: 61 kB. dist/ contains index.html and the hashed assets, ready to upload.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. loadEnv reads VITE_ variables for the current mode (production, staging…).
2. base controls the URL prefix for every asset — essential for sub-folder hosting.
3. Source maps are produced only for staging builds here.
4. manualChunks keeps React in its own long-cached file, so app updates do not re-download it.
5. The dev proxy forwards /api to the backend during development only.

Real-world use case#

Common mistakes#

Best practices#

• Preview every build locally
• Public config only in VITE_ variables
• Lazy-load routes to keep the main bundle small
• Long-cache hashed assets, never cache index.html

Remember this#

Practice exercise#

1# .env.development
2VITE_API_URL=http://localhost:4000/api
3

4# .env.production
5VITE_API_URL=https://api.shop.example.com
6

7# In code:
8# const res = await fetch(`${import.meta.env.VITE_API_URL}/products`);

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.