leodevbro/react-into-single-file.md

## react-into-single-file.md

      
    Raw
  

              react-into-single-file.md
            
          
    How to generate single file (HTML with all the CSS/JS inside) from React project
Note:

SVG files will be included (as SVG elements) in the single file.
Pixel based image files will be included as links/paths, so please host them somewhere to be accessible.
Also please host font files somewhere and then link them with @font-face.

Steps:

npm install --save-dev gulp gulp-inline-source gulp-replace
create an .env file in your project root folder and set the following environment variables:

INLINE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false
SKIP_PREFLIGHT_CHECK=true


create a gulpfile.js file in the root folder

const gulp = require('gulp');
const inlinesource = require('gulp-inline-source');
const replace = require('gulp-replace');

gulp.task('default', () => {
  return gulp
    .src('./build/*.html')
    .pipe(replace('.js"></script>', '.js" inline></script>'))
    .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
    .pipe(
      inlinesource({
        compress: false,
        ignore: ['png'],
      })
    )
    .pipe(gulp.dest('./build'));
});
Now, Steps for safety:


Create a new folder outside of the project, name it for example for-single-file-build.


From the project folder, select all files and all folders except .git, build, node_modules and copy.


Paste them into the for-single-file-build folder.


Next steps:


Inside the for-single-file-build folder, run npm i.


Before starting generating, note: If you are going to insert the generated code into a div of another webpage,
then you don't need the entire HTML file, but only part of it (I'll talk about it down below). And in order to prevent
CSS conflicts with the CSS of the host webpage, please delete all the global CSS styles
or make them local under the wrap of the root div of your react app like this:


Before: * {box-sizing: border-box;} After: .myCoolAppRoot * {box-sizing: border-box;}. This may change some
CSS specificities in our app, so please fix all the CSS issues before starting generating a build.


Inside the for-single-file-build folder, Run npm run build.
From here, also video instruction is available:
https://drive.google.com/file/d/1gSIjgFDcLQMc8HPK9iT6oSztjM9Q1IKK/view
These are the links mensioned in the video:
https://stage.bedrosians.com/frontend_cms/n2/
https://stage.bedrosians.com/bd_beta/en/thaddeus017/


Run npx gulp.


Go to build folder and copy the index.html file, and open with a text editor like Sublime.


If you want it to inject into a div of another webpage, delete these:


---- At the end of the file: </body></html>
---- In the middle of the file: </head><body>
---- At the top of the file: <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Bedrosians v1</title>

Now just copy the result code, it's ready.

Example live webpage, which hosts our code inside a div:
https://stage.bedrosians.com/bd_beta/en/fireart001002/
.
.
.