Complete Guide to Running Production Builds with Create React App

Understanding Production Builds

When developing React applications with Create React App, the npm run build command creates an optimized production version. This command packages the entire application into the build directory, generating compressed and optimized files suitable for production deployment.

Using the Serve Static Server

The simplest method to run a production build is using the serve package. First, install it globally:

npm install -g serve

After installation, run the following command from your project root:

serve -s build

This command starts a static file server, typically serving on port 3000. The console will display the access address, usually http://localhost:3000, where you can access the production version of your application.

Custom Port Configuration

To use a different port, employ the -l or --listen parameter:

serve -s build -l 4000

This will run the application on port 4000. To view all available options, run serve -h.

Custom Server with Express

As an alternative to serve, you can create a custom server using Express:

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

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

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

app.listen(9000);

This configuration not only serves static files but also handles client-side routing redirection, ensuring all routes return index.html.

Special Handling for Client-Side Routing

If your application uses client-side routing based on HTML5 pushState (such as React Router's browserHistory), special configuration is required to ensure all routes correctly return index.html. In the Express example above, we use app.get('/*') to capture all route requests.

Other Deployment Options

Beyond local execution, production builds can be deployed to various cloud platforms:

• Firebase Hosting: Deploy using the firebase deploy command
• GitHub Pages: Automate deployment through the gh-pages package
• Netlify: Supports continuous deployment and client-side routing
• Vercel: Zero-configuration deployment with global CDN

Build Configuration Optimization

For specific deployment environments, customize build configurations using environment variables. Create a .env.staging file for environment-specific variables and add a build script to package.json:

{
  "scripts": {
    "build:staging": "env-cmd -f .env.staging npm run build"
  }
}

Relative Path Building

If your application needs to be deployed under a subpath, set the homepage field in package.json:

"homepage": "http://mywebsite.com/relativepath"

Or use relative paths:

"homepage": "."

Common Issue Resolution

Various issues may arise during deployment:

• Route 404 Errors: Ensure server configuration correctly redirects to index.html
• Resource Loading Failures: Verify homepage configuration is accurate
• Caching Issues: Set appropriate cache headers for service-worker.js

Performance Optimization Recommendations

While production builds include many optimizations, further improvements are possible:

• Enable gzip compression to reduce transfer size
• Configure appropriate caching strategies
• Use CDN to accelerate static resource loading
• Monitor and optimize first-contentful paint time