How to package everything into single HTML file?

Question

How can I package up my site into a single static HTML file?

🔦 Context

I have a fairly simple site, it is a single page React app. When I do a build of the site I end up with three files; the HTML, JS, and a MAP file.

(actually what I tried to start with was to use webpack to produce a smaller set of files (HTML, images, js, map) and then tried to parcel that together into single file)

🌍 Your Environment

Software Version(s)
Parcel 1.9.4
Node 10.5.0
npm/Yarn 6.1.0
Operating System Mac OSX

3 thoughts on “How to package everything into single HTML file?

  1. @ScottChapman I wrote a Parcel plugin that uses inliner to inline CSS and JS into a single HTML file. All it takes is adding the it to your packages.json file.

    It’s still experimental, but I had no problems with it yet. Currently using it in a production app without hiccups.

    https://github.com/shff/parcel-plugin-inliner

    http://npmjs.com/package/parcel-plugin-inliner

    A caveat: it is not smart enough to inline things such as images referenced in React etc. And it also doesn’t mess with code-splitting (but I consider that a feature).

  2. I’ve tried both of the plugins above, and neither of them have functioned properly for me. Can’t this be standard functionality for ParcelJS to support? I don’t see much difference between outputting JS and CSS to files and including them in HTML vs. just inlining them straight into the HTML. I can see there being difficulty with inlining images but that’s an advanced feature.

    This seems to do the trick, for now…: https://github.com/remy/inliner