When process.env.INLINE_RUNTIME_CHUNK === 'true', the React JS library code should be written directly into the final index.html:
if(process.env.INLINE_RUNTIME_CHUNK) {
// insert React inside a <script></script> tag directly in index.html
}
The div tag is usually looked up when the HTML file gets read in during the build stage (in our case, we're replacing every %ENV_VAR% for the actual env var(s) at this stage already).
The React JS library code gets moved into a containing <script> tag at this point in the build, by scanning the read-in file content stream for the following:
The HTML comment part - <!-- application code goes here! --> - gets replaced with the React library code.
It seems to a "done thing" to .split() the HTML file in two, either side of the comment; like a functional list, we have a "head" part (pre-comment), and a "tail" part (post-comment).
Instead of using the relatively primitive fs.read/write methods to synchronously write new content into a new file, I see lots of examples of using streams and writing the "head" part on opening of the stream, then streaming the piped-in JS as a long-running process (async?), and then writing the "tail" part on closing the stream.
That's probably the way to do it. This inlining is how to enable CSP in React, which is pretty much mandatory for any meaningful application.
When
process.env.INLINE_RUNTIME_CHUNK === 'true', the React JS library code should be written directly into the finalindex.html:The div tag is usually looked up when the HTML file gets read in during the build stage (in our case, we're replacing every
%ENV_VAR%for the actual env var(s) at this stage already).The React JS library code gets moved into a containing
<script>tag at this point in the build, by scanning the read-in file content stream for the following:<script><!-- application code goes here! --></script>The HTML comment part -
<!-- application code goes here! -->- gets replaced with the React library code.It seems to a "done thing" to
.split()the HTML file in two, either side of the comment; like a functional list, we have a "head" part (pre-comment), and a "tail" part (post-comment).Instead of using the relatively primitive
fs.read/writemethods to synchronously write new content into a new file, I see lots of examples of using streams and writing the "head" part on opening of the stream, then streaming the piped-in JS as a long-running process (async?), and then writing the "tail" part on closing the stream.That's probably the way to do it. This inlining is how to enable CSP in React, which is pretty much mandatory for any meaningful application.