Блог

Я обслуживаю create-react-app build с помощью Express и добавляю некоторые теги скрипта index.html перед его обслуживанием. Поскольку я обрабатываю index.html файл перед подачей, я не хочу, чтобы мое express.static промежуточное программное обеспечение обрабатывало запросы для / or /index.html . Вот что я пытался сделать, чтобы это сработало:

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

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

Но это просто дает мне пустой белый экран, даже если вставляется исходный html-код, поэтому я предполагаю, что статическое промежуточное программное обеспечение все еще обрабатывает / запрос, оно просто перестало обслуживать другие статические ресурсы.

Как мне настроить этот код, чтобы мой express.static перестал переопределять мой /* маршрут?

Важно, чтобы я сохранил маршрут as /* , потому что я хочу, чтобы он обрабатывал все маршруты, определенные в react-router в клиентском приложении. Поэтому я не могу переместить express.static промежуточное программное обеспечение ниже /* маршрута, иначе это переопределит все запросы на статические ресурсы.

Вы можете передать {index: false} в качестве второго аргумента express.static , это исключит index.html отправку из build каталога.

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

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

Вы могли бы просто добавить отдельный обработчик для index.html и / перед статическим промежуточным программным обеспечением:

 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);
});