score:1

Accepted answer

I think you are looking for an automatic way of merging two outputs, one being your existing HTML with header and footer generated from your existing build process and triggered via a database.

The second being your react app which is a well finished final output that comes out of your create-react-app build infrastructure.

In such a case, I would recommend to use this very popular tool called gulp-inject. gulp-inject takes a stream of source files, transforms each file to a string and injects each transformed string into placeholders in the target stream files.

An example is given below:

Let's say your target file is called index.html like this

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>
 
  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>

Your gulpfile.js script would look like this to achieve a new index.html with new insertions automatically based on this script.

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'));
});

Your final output of your index.html would look like this after running gulp index:

<!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>

The basics of converting an existing HTML file and inserting it with ReactJS code is given below. I think if you apply these principles and use the gulp-inject tool, you can achieve wonders.

https://reactjs.org/docs/add-react-to-a-website.html

Your exact build automation maybe driven by your own tool such as Jenkins or such similar tools where you could chain one event with the other. For example, you could check whenever a new HTML file is automatically generated by your Database Triggering on AWS and once that event is received, you could trigger either the Gulp-Inject script if you already have the React Component(s) ready or trigger the Create-React-App to freshly build the React Component and then apply the Gulp-Inject script to inject your React Component or React Code into the index.html or whatever the name of your html page.

The npm package for gulp-inject can be found here.

https://www.npmjs.com/package/gulp-inject

Hope this helps. Let me know.

If you like the answer, you can accept it.

score:1

To do this you need to host your js, css, and media files from your react build folder in an S3 bucket and add the following to the code.

<html>
    ..... your static html code 


    <div id="the id used to bootstrap your react app (from the index.html file in the public folder)"></div>

    ......
    links to all the files in your JS, CSS And media files from the react build folder

</html>

I would suggest to use hosted images (you can host them on S3 as well) and assets as much as possible so you don't need to add the media file links on by one in the html file.

You may want to look at this link on how to bundle all files into one file when building your react app (I haven't tried this part).


Related Query

More Query from same tag