REACT Production Build

A React production build is an optimized version of your React app designed for deployment. It includes minified code, optimized assets, and efficient execution to improve performance and reduce loading times. Here’s everything you need to know to create, understand, and deploy a production build.

1. How to Create a React Production Build

If you’re using Create React App (CRA):

  1. Navigate to your project directory in the terminal: 
    cd your-react-app

    Try It Now

  2. Run the build command: 
    npm run build

    Try It Now

    Or, if using Yarn:

    yarn build

    Try It Now

  3. This will generate a build/ folder in your project directory containing the optimized production build.

2. Contents of the build/ Folder

The build/ folder contains:

  • HTML Files: index.html and other entry points.
  • Static Files: Minified and hashed JavaScript, CSS, and media files for caching purposes.
  • Source Maps (optional): Helps in debugging minified code in production (can be disabled).

Example structure:

build/
├── static/
│   ├── css/
│   ├── js/
│   ├── media/
├── index.html
└── manifest.json

Try It Now

3. Key Features of a Production Build

  • Minification: Removes unnecessary characters (spaces, comments) from code.
  • Code Splitting: Automatically splits large bundles into smaller chunks to load only the required parts.
  • Tree Shaking: Eliminates unused code.
  • Environment Variables: Automatically sets process.env.NODE_ENV to production.
  • Caching: File names include a hash for cache busting.

4. Serving a Production Build

You need a server to serve the production build files. Here are some popular ways to do it:

A. Using serve (Quick Test)

  1. Install the serve package globally: 
    npm install -g serve

    Try It Now

  2. Serve the production build: 
    serve -s build

    Try It Now

  3. Open your app in the browser at http://localhost:3000.

B. Deploying to Web Servers

  • Node.js Server: Copy your build/ folder to your server and serve it using Express or any Node.js server.

    Example:

    const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

    Try It Now

  • Static Hosting Services:
    • Netlify
    • Vercel
    • Firebase Hosting
    • GitHub Pages
    • AWS S3

5. Environment Variables in Production

You can configure your app’s behavior using environment variables. React uses .env files for this:

  1. Set Variables: Add to your .env file: 
    REACT_APP_API_URL=https://api.example.com

    Try It Now

  2. Access them in your app: 
    console.log(process.env.REACT_APP_API_URL);

    Try It Now

  3. Build the app: 
    npm run build

    Try It Now

Important: Only variables prefixed with REACT_APP_ are available in React apps.

6. Optimizing the Build for Production

For advanced optimization, you can customize the production build using tools like:

  • Webpack: Customize your webpack.config.js for bundling.
  • Terser: Optimize JavaScript code minification.
  • PurifyCSS: Remove unused CSS.

7. Testing the Production Build

  1. Test Locally: Serve it with a static server (e.g., serve) before deploying.
  2. Performance Testing: Use tools like:
    • Lighthouse (built into Chrome DevTools).
    • WebPageTest.
    • PageSpeed Insights.

8. Common Issues

  • 404 on Refresh: React apps using React Router need to handle routing properly. Use a fallback to index.html:
    • For Apache: Add an .htaccess file.
    • For Nginx: Configure the server to serve index.html for unknown routes.
  • Environment Variables Not Working: Ensure they’re prefixed with REACT_APP_ and set before building.

9. Deployment Example (Netlify)

  1. Push your React project to GitHub.
  2. Go to Netlify and log in.
  3. Create a new site, connect your GitHub repository, and choose the branch.
  4. Set the build command as npm run build and publish directory as build/.
  5. Deploy and get your production-ready site live!

10. Best Practices

  • Keep Source Maps Secure: Avoid exposing source maps in production unless needed for debugging.
  • Analyze Bundle Size: Use source-map-explorer or Webpack Bundle Analyzer.
  • Use HTTPS: Secure your app using HTTPS for all production deployments.
  • Optimize Images: Use tools like ImageOptim or webpack-image-loader.