Я пытаюсь обслуживать свое приложение 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'));
});
В настоящее время я использую абсолютные пути, чтобы убедиться, что я действительно указываю на правильный каталог,Но, к сожалению, когда я пытаюсь загрузить приложение в своем браузере, я получаю следующий вывод:
Файл 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
- asset-manifest.json
- manifest.json
- favicon.ico
- index.html
- service-worker.js
- сервер
- ...
Сначала я подумал, что, может быть, я что-то напортачил, когда выбросил свое приложение 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"
}