How to export react app to pure static html

Question

Like the title, I have a landing page written by reactJS, it's small and I want to export to pure static html. I've researched and not found any solution.

Answer 1

I used webpack to generate static html and javascript files.

here is a good guide on how to start

Answer 2

You need to pre render them with tools like https://www.npmjs.com/package/react-snapshot or https://github.com/stereobooster/react-snap

that actually make a snapshot of your current build but as plain html/css/js that can be run from any browser or even offline. There are also more advanced frameworks for this like Gatsby but this 2 should be enough for simpler problems.

Answer 3

The below code will give you the static file in the dist folder.

   const path = require('path');

   module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      }
    };

Then you can use below line code to send static files to browser, if you have express server:

app.use('/dist', express.static(path.join(__dirname, 'dist')));

// Here put all your API route.

router.get('*', (req, res) => {
    const route = path.join(__dirname, '..', 'dist', 'index.html');
    res.sendFile(route);
});

Answer 4

Here is my attempt. From the docs we can see that package.json entry of homepage makes THE difference, including deployment on GitHub pages which I have written about.

1. Standard CRA app
2. Edit package.json with "homepage": "."
3. Run npm/yarn build
4. On Linux xdg-open build/index.html

Your app should be running. And if the question is asking about embedding it in your custom HTML file then either use an iframe or link what is in the index.html file with the referenced element for React to render there.

Answer 5

Convert react app to complete static HTML isn't possible since 'dynamic rendering' is on which whole react is working. Although if you want equivalent html, you can get that from browser by inspecting but that's not 100% reliable solution.

Even if you have a simple react app, for ex. Simple hello world, you can get equivalent HTML and css at runtime by inspecting but if someone have used something like router or States etc ,then it's not possible to convert it to STATIC HTML and retain all its working easily.

The point you mentioned that you want it to run simply by running the index.html , that is possible but that's also not static html.

Run npm build or yarn build , this will generate a build directory , in that you have static folder, index.html, all your css , js files , all minified , ready for deployment. Now you can simply run index.html, all css , js is already linked in that HTML file , this build is just a normal version of your react app which will run in browser directly , by just running index.html, no node environment needed!

So, your second part is solved that you have index.html, you can directly run that in browse.

If you want single HTML file, you can manually move all CSS and js to style and script tags respectively in index.html after build.