Отказался от применения стиля и ошибки 404 при использовании экспресс-сборки и сборки React - PullRequest
0 голосов
/ 27 сентября 2018

Я пытаюсь обслуживать свое приложение React через сервер Express со следующим кодом:

// server/app.ts
app.use(express.static(path.join('/home/bram/Documents/Tool/build/', "static")));
app.get('/', (req, res) => {
    res.sendFile(path.join('/home/bram/Documents/Tool/build/', 'index.html'));
});

В настоящее время я использую абсолютные пути, чтобы убедиться, что я действительно указываю на правильный каталог,Но, к сожалению, когда я пытаюсь загрузить приложение в своем браузере, я получаю следующий вывод: enter image description here
Файл index.html, созданный в процессе сборки React, содержит следующий код:

 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <link rel="manifest" href="/manifest.json">
      <link rel="shortcut icon" href="/favicon.ico">
      <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i" rel="stylesheet">
      <title>React App</title>
      <link href="/static/css/main.09c2cd91.css" rel="stylesheet">
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script type="text/javascript" src="/static/js/main.3bf29127.js"></script>
   </body>
</html>

Я считаю, что пути к файлам таблиц стилей и js выглядят хорошо здесь.
У меня следующая структура папок:

  • build
    • static
      • css
        • main.09c2cd91.css
        • main.09c2cd91.css.map
      • js
        • main.3bf29127.js
        • main.3bf29127.js.map
      • media
        • coins.c39b5ed2.ttf
    • asset-manifest.json
    • manifest.json
    • favicon.ico
    • index.html
    • service-worker.js
  • сервер
    • app.ts
    • ...
  • ...

Сначала я подумал, что, может быть, я что-то напортачил, когда выбросил свое приложение React, но я все еще могу запустить приложение(не полностью его создавая), поэтому я предполагаю, что это не так.Любая идея?

РЕДАКТИРОВАТЬ

Было предложено использование статического промежуточного программного обеспечения для указания непосредственно на папки js, media и css.Я обновил свой код следующим образом:

app.use(express.static("/home/bram/Documents/Trading_Tool/TGP-Crypto-Trading-Tool/build/static"));
app.use(express.static("/home/bram/Documents/Trading_Tool/TGP-Crypto-Trading-Tool/build/static/css"));
app.use(express.static("/home/bram/Documents/Trading_Tool/TGP-Crypto-Trading-Tool/build/static/js"));
app.use(express.static("/home/bram/Documents/Trading_Tool/TGP-Crypto-Trading-Tool/build/static/media"));
app.get('/', (req, res) => {
    res.sendFile(path.join('/home/bram/Documents/Trading_Tool/TGP-Crypto-Trading-Tool/build/', 'index.html'));
});

Это, к сожалению, не решило проблему.

РЕДАКТИРОВАТЬ 2

Я не уверен, будет ли это полезной дополнительная информацияно мой asset-manifest.json файл выглядит следующим образом:

{
  "main.css": "static/css/main.09c2cd91.css",
  "main.css.map": "static/css/main.09c2cd91.css.map",
  "main.js": "static/js/main.3bf29127.js",
  "main.js.map": "static/js/main.3bf29127.js.map",
  "static/media/coins.ttf": "static/media/coins.c39b5ed2.ttf"
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...