CODEWITHSUNDEEP
node.jsreactjs
i.brod
i.brod

Reputation: 4603

Express server serving index.html instead of chunk files, in a React app

I'm trying to serve a production build of a React app(Typescript), booted with create-react-app.

I'm following the official guide: https://create-react-app.dev/docs/deployment/

There's nothing unique about my setup. This is the server.js file, located in the root directory(above src):

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


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

The production files are created within a folder called build. An example of the paths generated:

  <script src="./static/js/main.0ae46692.chunk.js"></script>

When i navigate to localhost:8000/, everything is served fine. The initial request serves the index.html, and the script requests serve the correct files.

But, when i try to navigate(from the browser) to something like localhost:8000/todos, all script requests return index.html.

I do not see anything "special" about my setup, and do not understand what's going on. Am i missing something in the guide? It clearly states that app.get('/*',...) fixes the issue.

Any help will be greatly appreciated.

Upvotes: 0

Views: 1487

Answers (1)

Gibryon Bhojraj
Gibryon Bhojraj

Reputation: 753

Copying the comment into an answer here so it can be marked.

This sounds like the issue is the script tags are generated with relative paths, because it works when you make a request to the root /, but not anything else. Could you try setting the "homepage" to "localhost:8000"

Upvotes: 1

Related Questions