Я думаю, что вы ищете автоматический c способ объединения двух выходов, один из которых - существующий HTML с верхним и нижним колонтитулами, сгенерированными из существующего процесса сборки и запущенными из базы данных.
во-вторых, это ваше реактивное приложение, которое представляет собой хорошо законченный конечный результат, выходящий из вашей инфраструктуры сборки приложения create-Reaction-app.
В таком случае я бы порекомендовал использовать этот очень популярный инструмент, называемый gulp-inject. gulp-inject принимает поток исходных файлов, преобразует каждый файл в строку и внедряет каждую преобразованную строку в заполнители в файлах целевого потока.
Ниже приведен пример:
Допустим, ваш целевой файл называется index. html вот так
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
Ваш gulpfile. js сценарий будет выглядеть так, чтобы получить новый индекс. html с новыми вставками, автоматически основанными на этом сценарии.
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});
Ваш окончательный вывод индекса . html будет выглядеть следующим образом после запуска индекса gulp:
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<link rel="stylesheet" href="/src/style1.css">
<link rel="stylesheet" href="/src/style2.css">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script src="/src/lib1.js"></script>
<script src="/src/lib2.js"></script>
<!-- endinject -->
</body>
</html>
Основные сведения о преобразовании существующего файла HTML и вставке его с кодом ReactJS приведены ниже. Я думаю, что если вы будете применять эти принципы и использовать инструмент gulp-inject, вы сможете творить чудеса.
https://reactjs.org/docs/add-react-to-a-website.html
Ваша точная автоматизация сборки может быть реализована с помощью вашего собственного инструмента, такого как Jenkins, или подобных инструментов, где вы можете связать одно событие с другим. Например, вы можете проверять всякий раз, когда новый файл HTML автоматически генерируется вашей базой данных, запускающей на AWS, и после получения этого события вы можете запустить любой сценарий Gulp-Inject, если у вас уже есть компонент React. ) готовы или активируют Create-React-App для новой сборки компонента React, а затем применяют сценарий Gulp-Inject для внедрения компонента React или кода React в индекс. html или любое другое имя вашей страницы html.
Пакет npm для gulp-inject можно найти здесь.
https://www.npmjs.com/package/gulp-inject
Надеюсь, это поможет. Дайте мне знать.
Если вам нравится ответ, вы можете принять его.