Assets not included

[makerstorage]

I have tested this plugin with vite default example. The assets are built in a dir in the dist folder. I also use { useRecommendedBuildConfig: true } but nothing change. What am I missing? How can I get a single html file in the dist folder after build?

[richardtallent]

I don't know what you're missing. Please provide a reproducible issue and I'll be happy to look. Also, please check out this example and compare to your own setup:

https://github.com/richardtallent/vite-plugin-singlefile-example

[makerstorage]

Thanks for the replay,

It is very easy to reproduce my situation. just

npm create vite@latest

and add single file plugin

npm run build.

There are still assets directory and a svg files that did not added into the single file.

Thanks

[JuanQP]

I think what @makerstorage is taking about is the limitation of not including images. Like, if you create an empty react app you will have something like this (with NO images):

I think the problem is here:

If you change (manually, of course) that src to ./assets/react-35ef61ed.svg (notice the dot at the beginning) images will load:

It would be great if this project could just use the base property of the build when something is not inlined (like images) so you can just configure it like build: "./" in the vite.config.ts. Obviously, I don't know if this is possible, but it seems that everything works perfectly with JS, but the problem is that images should be referenced with a relative path in order to make it work as a single html file with file protocol

[makerstorage]

That's what I am saying. Thanks for the clarification @JuanQP

[richardtallent]

Inlining of SVG isn't supported directly by Vite, so it isn't supported directly here either. You'll need to use something like https://github.com/jpkleemans/vite-svg-loader, or put your SVG directly into the template.

[JuanQP]

If it's more important to load the assets and having everything in a single file is not that important, have a look at this small plugin I've made and check if it suits your needs. I've used it with a few small projects I have without problems.

https://github.com/JuanQP/vite-plugin-make-offline

[atomiechen]

@makerstorage @JuanQP

Problem

Hi, I encountered exactly the same situation (Vite + React + vite-plugin-singlefile) and noticed that logos are not rendered correctly. I also noticed that even the official test project vite-plugin-singlefile-example would build a html that the favicon cannot be rendered on the browser tab in offline mode (check the console error).

Reason

The root cause is that static resources (such images like favicon.ico / *.svg / *.png, etc.) in public folder are copied to ${build.outDir} by Vite and not inlined by this plugin. However, as @makerstorage suggested, we CAN use relative paths for these not-inlined files.

Solution

In vite.config.ts,

1. Set base to './' to enable relative path.
2. We also need to change the build.assetsDir to '' to make Vite generated asset files (.js / .css) in ${build.outDir}'s root, instead of default ${build.outDir}/assets. Then Vite can put correct urls in these files, considering that our final HTML with inlined js / css is placed together with above copied static resources.

I fixed this and make it the recommended build config (see PR #86 ). Before it's merged, you can set useRecommendedBuildConfig to false and apply above solution.

P.S.

In my version of Vite (5.0.11) and React (18.2.0), if I put svg files in src/assets/, I can get them correctly inlined in the HTML source. So it seems like Vite can inline SVG out of box with React, and you can either put images in src to make it inlined by this plugin, or put them in public as static resources un-touched.