Как правильно организовать раздачу статики на express.js с учетом react-router?

Question

[B1dloKoder]

Пытаюсь написать веб-приложения с использованием реакта и express. Наткнулся на некоторые странности.

Вот так раздаю статику.

app.use(express.static(__dirname + './../public' ));
app.use(express.static(__dirname + './../public/js' ));
app.use(express.static(__dirname + './../public/css'));

Чтобы работало с react-router делаю так

app.use('*', (req, res) => {
  res.sendFile("index.html", { root: __dirname + "/../public/"});
})

Первая проблема заключается в том, что разные браузеры как-то по разному "воспринимают" пути к файлам. Например, хром видит подключенные в index.html файлы.

Также работает и файерфокс
А Яндекс браузер нет.



Вторая проблема заключается в том, что при раздаче файлов почему-то учитывается путь из адресной строки. Простите, может неправильно формулирую, ниже скриншоты для наглядности.
Если не перезагружать страницу, то роутинг работает вроде как нормально, исключая ошибку природа которой мне не совсем ясна:

Но стоит перезагрузить страницу и получаю это

При этом почему файлы ищет в "/main/" которой само собой нет.

Из этого следует вопрос, как правильно настроить раздачу статики в express? Прописывать каждый путь, когда раздаю статику? Выглядит так себе. Но даже это не смогу сделать, пока не разрешу первую проблему.

Comments

[alex4answ]

А настроить статику на определнный рут аля "/static/*" пробовали?

[B1dloKoder]

alex4answ,

Я попробовал три варианта

//так
app.use("/static/*", express.static(__dirname + './../public' ));
app.use("/static/*", express.static(__dirname + './../public/js' ));
app.use("/static/*", express.static(__dirname + './../public/css'));
//вот так
app.use("/static/", express.static(__dirname + './../public' ));
app.use("/static/", express.static(__dirname + './../public/js' ));
app.use("/static/", express.static(__dirname + './../public/css'));
//и так
app.use("/static", express.static(__dirname + './../public' ));
app.use("/static", express.static(__dirname + './../public/js' ));
app.use("/static", express.static(__dirname + './../public/css'));

И получаю это. Начинает искать в /static/ которой само собой нет.


Можно сделать вот так

app.use(express.static(__dirname + './../public' ));
app.use(express.static(__dirname + './../public/js' ));
app.use(express.static(__dirname + './../public/css'));
app.use("/main", express.static(__dirname + './../public' ));
app.use("/main", express.static(__dirname + './../public/js' ));
app.use("/main", express.static(__dirname + './../public/css'));

И оно работает, однако мне придется прописывать для каждого пути. Это не очень удобно. Вернее это совсем неудобно

Перед отправкой файла я так понимаю экспресс меняет все ссылки (насколько я понимаю). Как этого избежать я не знаю

[legacy_js]

B1dloKoder, Я у себя делаю вот так

app.use(express.static(path.resolve(__dirname, 'public')));

В public лежат папки css, js, img, но я не использую реакт, пользуюсь pug'ом, html лежит во views. В главном шаблоне подключаю так

href='/css/layout.css'
// ... и т.д

Мое мнение, что нужно подключать только корневую папку со статикой, а вложенные папки и файлы, он сам подхватывает

[B1dloKoder]

legacy_js, он не подхватывал - или я что-то не так делаю

app.use( express.static(path.resolve(__dirname, './../public')) );
app.use(express.static(path.resolve(__dirname, './../public/js') )); //если убрать это
app.use(express.static(path.resolve(__dirname, './../public/css'))); //и это то работать не будет

проблему кое-как решил добавлением:
<base href="http://localhost:<PORT>">
Но вопрос с яндекс браузером остается

Answer 1

[B1dloKoder]

Проблема была с названием путей в index.html
после того как я переименовал папки из css и js в javascript и stylesheet все заработало.