How to package everything into single HTML file?

[ScottChapman]

❔ 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

[DeMoorJasper]

Combining parcel and webpack is probably not a great idea, currently the only way to do this is to use multiple entrypoints and then use a custom script (that runs after parcel) that writes all those bundles into an html file (probably using some sort of templating engine)

Multiple entrypoints should maintain the filenames so it should be fairly easy to figure out how to write this script after getting parcel set up with multiple entrypoints

[ScottChapman]

Yea, I assumed that was true. I'm guessing I can do the same thing just using parcel.

For my React app I have two top level files; one is .js and the other .jsx.

How exactly would I run parcel to build the dist files for that? I can probably then figure out how to combine the files.

Thanks!

[peanutbother]

I use such an approach for building multiple targets (Browser, service worker)

https://github.com/peanutbother/parcel-serviceworker-example

[ScottChapman]

@peanutbother - sorry not understanding how your example works. Does it actually end up with a single file (or a few files that can manually be stitched together)?

[peanutbother]

I recommend you to clone the repo, run yarn and look into build directory.

Basically by referencing entry files in a single HTML file using <a href="./relariveEntryFile"></a> parcel transpiles these files as single files preserving filenames, except for special cases.

Alternatively open the heroku site and look at the HTML source.

[ScottChapman]

Just did that, I got a dist folder once I did a yarn start.

So, I don't think that gives me what I need. I basically need to be able to stitch together a single file (with no external file references).

The use-case (which I probably should have explained) is that I want to be able to return that from a serverless framework like AWS Lambda or Openwhisk.

Basically they are Javascript functions that can return a string. So, I can return HTML. I just need to generate that HTML using something like Parcel, so I can embed the result in the function and return it when called.

Make more sense?

[peanutbother]

Then i would use parcel programmatically since that what I think you are trying to do isn't a standard use-case for parcel. I will look into this further when I geht home.

[shff]

@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).

[alekpentchev]

@shff I have a problem with the plugin. After installing it via npm and building index.html I receive parcel bundles as normally, not one inlined html. Even the html file does not contain css styles and js. How can I overcome this?

[peanutbother]

@alekpentchev I recommend you to move your question to a new issue at the author's plugin. Since this issue here was about possible ways in general but your question is targeted at the plugin of @shff

[alekpentchev]

Sure, sorry for that.

[xingqiao]

https://github.com/xingqiao/parcel-plugin-inline-source https://www.npmjs.com/package/parcel-plugin-inline-source

set attribute inline="inline" to Githubissues.

Githubissues is a development platform for aggregating issues.