Dynamically updating index.html file in production build of a create react app

I've successfully added SSR for CRA without ejecting. If that's your only use case, the SSR setup will be super simple as you don't have to deal with webpack or babel configs. If you are interested, follow 3 steps below:

• Step 1: Add a basic Express server in a new folder at your root/ project folder (same level as src/)
• Step 2: For main app routes, read file build/index.html and edit it as you want before sending.
• Step 3: Other than those routes, serve CRA build/ static files as suggested by CRA SSR documentation

TL;DR

// root/server/index.js (your build is at root/build)
const express = require("express");
const fs = require("fs");
const path = require("path");

const app = express();

// step 2
const renderContent = (req, res) => {
  fs.readFile(
    path.resolve(__dirname, "../build/index.html"), "utf8", (err, htmlData) => {
      if (err) {
        return res.sendStatus(500);
      }

      /* Do something with htmlData here */

      return res.send(htmlData);
    });
}

app.use("^/$", renderContent); // step 2
app.use(express.static(path.resolve(__dirname, "../build"))); // step 3
app.use("*", renderContent); // step 2

// step 1
app.listen(process.env.PORT, () => {
    console.log(`Listening on port ${process.env.PORT}`);
});

Then, you just need to run: node server/index.js, and this server will serve your Create React App normally, except for the part that you edit your HTML above.

I don't know if this will help, but as a suggestion. I faced a similar usecase. I solved it very simply using HtmlWebpackPlugin.

Inside the webpack configuration. I write something like:

 new htmlWebpackPlugin({
      template: path.join(rootpath, '', 'index.html'),
      inject: false //<-- Notice here
    })

I set the "inject" to false and using this flag it does not append the script's/bundle on index.html and at the same time it allowed us to use ejs templating to loop over the file's we want to append on index.html.

Like on index.html I wrote:

 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
                <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.files.chunks[chunk].css %>">
                <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
                <% } %>

My suggestion would be create a separate chunk/file(js) of that data you want to append dynamically on index.html and using EJS templating, you can achieve the desired result.

How to Create Chunks: READ HERE

Thanks, Hope it Help.