Exclude index.html from express.static when serving React app with Express

Question

I'm serving a create-react-app build using Express and appending some script tags to index.html before serving it. Since I'm manipulating the index.html file before serving, I don't want my express.static middleware to handle requests for / or /index.html. Here's what I've tried to make this work:

app.use(
  [/^\/index\.html/, /^\//],
  express.static(path.join(__dirname, "../../build"))
);

app.get("/*", function (req, res) {
  // logic to manipulate index.html
  res.send($.html());
});

But this just gives me a blank white screen even though the original html code gets inserted so I'm assuming that the static middleware is still handling the / request, it just stopped serving the other static assets.

How do I configure this code so my express.static stops overriding my /* route?

It's important that I keep the route as /* because I want that to handle all routes defined in react-router in the client application. So I can't move express.static middleware below the /* route otherwise that will override all requests for static assets.

Shivam Sharma · Accepted Answer · 2022-01-13 08:08:49Z

6

You can pass {index: false} as the second argument of express.static, this will exclude index.html to be sent from the build directory.

app.use(express.static(path.join(__dirname, "../../build"), {index: false}));

app.get("*", (req, res) => {  
    // logic to manipulate index.html
    res.send($.html());
});

answered Jan 13, 2022 at 8:08

Shivam Sharma

1,62722 silver badges35 bronze badges

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

Comments

eol · Accepted Answer · 2020-12-09 09:20:46Z

1

You could simply add a seperate handler for index.html and / before the static middleware:

function serveIndex(res) {
  res.send($.html());
}

app.get(["/index.html", "/"], (req, res) => {
    serveIndex(res);
});

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

app.get("/*", (req, res) => {  
    serveIndex(res);
});

answered Dec 9, 2020 at 9:20

eol

24.7k6 gold badges53 silver badges72 bronze badges

1 Comment

Abhijeet Singh Over a year ago

I actually ended up with just importing an array of all the react-router routes and replaced /* with that. Then I just had to move express.static below that handler to make it work. But this seems like a simple workaround. Thanks!

Collectives™ on Stack Overflow

Exclude index.html from express.static when serving React app with Express

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related