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

Question

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.

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"? — Gibryon Bhojraj
– Gibryon Bhojraj, Commented Sep 3, 2021 at 18:02
Hmm that did the trick. Also, when i did homepage:"/", it works fine. Thank you. — i.brod
– i.brod, Commented Sep 3, 2021 at 18:21

Gibryon Bhojraj · Accepted Answer · 2021-09-03 20:43:23Z

1

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"

answered Sep 3, 2021 at 20:43

Gibryon Bhojraj

7535 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related