Is it possible to export React single page website as HTML?

Question

I have a single page web application using React and materialize-css and I would like to export it as static HTML and CSS so that it is possible to easily edit HTML for the purpose of prototyping. Is it possible to export at least a snapshot of current state?

I tried "save page" in Firefox and Chrome, but it does not provide good results.

Solution 1

Follow the following steps :-

1. In brouser, got to the developer tools,

2. select Inspector(firefox)/Elements(chrome),

3. then select the tag HTML, right click on it,

4. then click Edit as HTML.

Now you can copy all the code and save it. While the color and shape of the document remains, you will miss the pictures. Good luck ! :)

Solution 2

Probably not ideal, but you can store the entire page as a variable and download it. Run this in your browser console after the page has loaded:

var pageHTML = document.documentElement.outerHTML;

var tempEl = document.createElement('a');

tempEl.href = 'data:attachment/text,' + encodeURI(pageHTML);
tempEl.target = '_blank';
tempEl.download = 'thispage.html';
tempEl.click();

Solution 3

The ReactDOMServer module contains a function for rendering a React application to static HTML - it's designed for use on the server, but I don't think there's anything to stop you using it in the browser (don't do this in production though!)

import ReactDOMServer from "react-dom/server";
import App from "./yourComponent";

document.body.innerHTML = ReactDOMServer.renderToStaticMarkup(App);

Solution 4

  var pageHTML = window.document.getElementById('divToPDF').innerHTML;
  let data = new Blob([pageHTML], {type: 'data:attachment/text,'});
  let csvURL = window.URL.createObjectURL(data);
  let tempLink = document.createElement('a');
  tempLink.href = csvURL;
  tempLink.setAttribute('download', 'Graph.html');
  tempLink.click();

View more solutions

Comments

[Marcin]

This gave me similar result as "save page" in Firefox, it had style better formated. Unfortunately it did not display icons properly.

[Marcin]

I am not sure how to use this. Besides that will this solution provide CSS styles and icons (will it do better than Firefox)?

[dommmm]

you'll probably have to check if all your assets are being loaded on the new static page.

[Angel Venchev]

I'd be happy if I get a comment on how to improve my answer instead of just a down-vote.

[TheClockTwister]

I see nothing wrong with this approach, it's simple, free, and works...

[Marcin]

Question is about extraction of HTML+CSS without JS. npm run build will just build the ordinary webapp bundle which will render HTML once loaded by browser. This is dynamic and also requires to stub APIs so that app is fed with data. Still that is not what I was looking for.