Let's break down why you're hitting the R10 error and walk through the fixes step by step:

Root Cause #

The R10 (Boot timeout) error happens because Heroku can’t detect your web process binding to the required $PORT environment variable within 60 seconds. Your current setup uses webpack-dev-server—a tool built for local development (with hot reloading, live previews, etc.)—which is slow to start and not designed for production use. Plus, your script flow has unnecessary steps that add to deployment delays.

Step 1: Clean Up Your package.json Scripts #

First, let’s optimize your scripts for Heroku’s deployment workflow:

{
  "scripts": {
    "build": "webpack --mode production",
    "start": "serve -s dist", // Use a production-ready static file server
    "heroku-postbuild": "npm run build"
  }
}

Here’s what each change does:

• Remove heroku-dev: Heroku automatically installs dependencies during deployment. If you need devDependencies for building, set NPM_CONFIG_PRODUCTION=false in Heroku’s environment variables (only do this if your build tooling requires it—most can run with temporary devDependency installs).
• Replace wstart with serve: serve is a lightweight, fast-starting static server built for production. The -s flag ensures it handles single-page app routing correctly (if your app uses client-side routing).
• Add heroku-postbuild: This script runs automatically after Heroku installs dependencies, so you don’t need to chain build commands into your web script. Heroku defaults to running npm start for your web process.

Step 2: Confirm Your Webpack Configuration #

Make sure your webpack.config.js outputs files to a dist directory (adjust the serve path if you use a different folder):

const path = require('path');

module.exports = {
  // ... other webpack settings
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    publicPath: '/'
  }
};

This ensures serve can find all your bundled static files correctly.

Step 3: Install the serve Package #

Don’t forget to add serve as a production dependency:

npm install serve --save

Why Your Original Setup Failed #

• webpack-dev-server is made for local development, not production. It spins up a full webpack watcher with hot reloading, which takes too long to start—Heroku kills the process before it can bind to the port.
• Chaining npm run heroku-dev && npm run wbuild && npm run wstart adds unnecessary overhead: reinstalling dependencies every deployment slows things down, and combining build and start commands means Heroku has to wait through both steps before detecting the server.

Alternative: Use a Custom Express Server (If Needed) #

If you need more control (e.g., adding API routes), create a simple Express server that serves your bundled files and binds to the correct port:

1. Install Express:

npm install express --save

2. Create a server.js file:

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

// Serve static files from the dist directory
app.use(express.static(path.join(__dirname, 'dist')));

// Handle SPA routing (for React/Vue/etc.)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// Bind to Heroku's PORT or default to 3000
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3. Update your start script:

"start": "node server.js"

This will start quickly and bind to the correct port, avoiding the R10 timeout.

内容的提问来源于stack exchange，提问作者Carter Nabors