将React Redux应用部署到Heroku时，为何需在根目录添加static.json及指定配置？

Great questions—these are super common pain points when getting your first React/Redux app live on Heroku, so let’s break them down clearly.

1. Why do we need a static.json file in the project root? #

Heroku uses a static file server (built on nginx under the hood) to serve your app’s production assets. By default, this server looks for files directly in your project’s root directory—but when you build a React app, all your compiled, minified production files (JS, CSS, images, etc.) get output to a dedicated folder (usually dist/ or build/, depending on your setup).

Without static.json, Heroku has no clue where to find these built assets. Even bigger issue: since React is a single-page application (SPA) that handles routing on the client side, direct requests to paths like /dashboard or /profile would throw a 404 error—because Heroku’s server would try to locate a physical file or folder at that path, which doesn’t exist.

The static.json file acts as a instruction manual for Heroku’s static server: it tells the server where your actual app files live, and how to handle client-side routing properly.

2. Why does the static.json need that specific configuration? #

Let’s unpack each line of the config:

• "root": "dist/": This tells Heroku that all your production-ready static assets (the ones generated when you run npm run build or similar) are stored in the dist/ folder. The server will treat this directory as the root of your app—so when someone visits your site, it loads dist/index.html first, along with the associated JS/CSS files from dist/.

• "routes": { "/**": "index.html" }: This is the key fix for client-side routing. Here’s what it does:

  • The /** is a wildcard that matches every possible path a user might visit (like /about, /posts/123, or even a random typo path).
  • Instead of returning a 404 when the server can’t find a physical file at that path, it will always serve index.html instead.
  • Once index.html loads, your React app (and React Router, if you’re using it) takes over, reads the URL, and renders the correct component for that route.

This ensures that no matter how a user arrives at your app—whether they land directly on a subpage or navigate around internally—they always get the main index.html file that bootstraps your React application and handles routing client-side.

内容的提问来源于stack exchange，提问作者Piyush Jain