13

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.

Marcin
  • 279
  • 1
  • 4
  • 13

7 Answers7

3

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 ! :)

Tom
  • 184
  • 2
  • 7
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();
dommmm
  • 899
  • 8
  • 16
  • This gave me similar result as "save page" in Firefox, it had style better formated. Unfortunately it did not display icons properly. – Marcin May 05 '17 at 12:44
  • you'll probably have to check if all your assets are being loaded on the new static page. – dommmm May 08 '17 at 01:36
2

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);
Joe Clay
  • 33,401
  • 4
  • 85
  • 85
  • I am not sure how to use this. Besides that will this solution provide CSS styles and icons (will it do better than Firefox)? – Marcin May 05 '17 at 12:51
1
  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();
zakaria mahmud
  • 33
  • 1
  • 9
0

You can build your code and host it on github.io. The following tutorial will help you achieve that. You can then use the generated code in the gh-pages branch as your exported HTML

Angel Venchev
  • 697
  • 1
  • 7
  • 18
0

This was the first thread I found on SW.. so I think it would be appropriate to copy my own answer from another thread: https://stackoverflow.com/a/72422258/1215913

async function saveToFile() {
    const handle = await showSaveFilePicker({
        suggestedName: 'index.html',
        types: [{
              description: 'HTML',
              accept: {'text/html': ['.html']},
          }]
    });
    const writable = await handle.createWritable();
    await writable.write(document.body.parentNode.innerHTML);
    writable.close();
}; saveToFile();

for more info check the source answer

Alex
  • 4,607
  • 9
  • 61
  • 99
-1

I had done this before but was stuck and couldn't seem to find the documentation anywhere. My scenario was I had a react js SPA and needed to create a static build to run without a server (through an organisations SharePoint using a static doc repository).

It is pretty simple in the end, run

npm run build

in your project directory and it will create the static build in a 'build' folder ready for you to dump wherever needed. Reference: https://create-react-app.dev/docs/production-build/

Paul Clark
  • 61
  • 1
  • 14
  • 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. – Marcin Apr 14 '21 at 15:23