Я занимаюсь разработкой приложения с помощью create-реакции-приложения, и все идет хорошо, за исключением того факта, что я хотел бы изначально обслуживать index.html из бэкэнда, и у меня возникают проблемы при этом.
Причина, по которой я хочу это сделать, заключается в том, что я могу добавить некоторые пользовательские c Javascript на страницу index.html, а также запускать различные другие запросы, когда пользователь изначально заходит на страницу ( похоже на этого человека )
Таким образом, вместо подключения к localhost:3000 для просмотра приложения, я бы вместо этого подключился к localhost:8080, чтобы сервер обслуживал этот файл index.html. (все остальные ресурсы (js, css, изображения) по-прежнему будут на localhost:3000)
Одна из проблем, возникающих при этом, заключается в том, что теги сценариев не включены в файл index.html по умолчанию, и вместо этого генерируются create-реагировать-приложение. То есть, скажем, это мой index.html файл:
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
</html>
Если я запусту npm start, а затем проверю источник, он будет вместо этого (из-за инъекций во время выполнения CRA, я предполагаю):
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>
</html>
В результате на сервере я сейчас пытаюсь что-то вроде этого:
#[get("/")]
fn handle_index() {
let scripts = r#"<script src="https://localhost:3000/static/js/bundle.js"></script>
<script src="https://localhost:3000/static/js/0.chunk.js"></script>
<script src="https://localhost:3000/static/js/main.chunk.js"></script>"#;
let index_html = include_str!("../frontend/public/index.html");
let document = format!(r#"<script type="application/javascript">
window.APP_GLOBALS = { user_id: 5, color: "red" };
</script> {}{}"#, data, index_html, scripts);
return document;
}
Потому что я не уверен ни в каком другом способе внедрения этих тегов скрипта. Похоже, что create-реакции-приложение делает это только для моей localhost:3000 страницы, а не для localhost:8080 страницы.
Кажется, что несколько работает. То есть страница загружается, но есть две проблемы.
Многие URL-адреса ресурсов теперь неверны. Вместо этого они указывают на localhost:8080 вместо localhost:3000, и URL-адрес %PUBLIC_URL% также не работает (я полагаю, это еще один процесс, который больше не происходит)
Девайс websocket с автозагрузкой больше не работает. Это работает, когда я перехожу на localhost:3000, но не localhost:8080. Когда я редактирую файл и сохраняю, страница просто становится белой без ошибок в консоли.
Я думаю, что все эти проблемы связаны с одной и той же причиной: create-react-app обычно препроцессирует файл index.html каким-то образом (преобразование %PUBLIC_URL%, добавление этих тегов сценария, обработка перезагрузки), но он больше не делает этого, когда файл вместо этого возвращается с сервера.
What I'm интересно, как я могу восстановить эту функциональность. По сути, эти теги сценариев и процессы %PUBLIC_URL% происходят без необходимости выполнения этого моим внутренним сервером.