In principle, all I'm looking to accomplish is embed a static build of a web app into an electron powered vite app.
Context
== File Structure ==
- public/
| - static_build/
| - index.html
| - ...
- index.html
- src/
| - main.ts
| - renderer.ts
| - ...
Problem(s)
The static build files are treated as public assets, and an iframe in the renderer requests them as its source. However, I've found two problems with this:
In the development environment, vite refuses to load the
index.htmlfrom the static build when provided with the static build directory as its source (/static_build/). This can be "fixed" by providing the path to theindex.htmlas the source (/static_build/index.html), however, the embedded is a react-router app, and its route is poisoned by the incorrect source. (Using the directory path is also the correct method as by the embedded app's developers, so, for future compatibility, I'd like to adhere to their best practices)In the production build, absolute paths don't work (they become file URLs for absolute paths, for example:
file:///C:/static_build/...on Windows), and relative paths compound on each other. (./static_buildis fine as the source of the iframe, but whenstatic_build/index.htmlhas an element with a source of./static_build/some_resource, that becomes./static_build/static_build/some_resource). I could, in theory, sift through the tens of thousands of lines of code in the web app, and swap all the absolute paths for horrendously obnoxious relative paths, but that is not a solution, it's a bodge.
I'm guessing that (2) is just due to my lack of knowledge on vite, because it seems absolutely stupid and incredibly incompetent to make a packaging tool that requires refactoring all asset paths for swapping between development/production. (Though, this is javascript we're talking about, so I wouldn't be surprised)
In any case, I'd like to hear if there's something I've missed in the documentation or some magical witchcraft I need to engage in to make all of this simply work.
If not, I'll go back to the hellscape that is webpack and try to get that working instead. At least that disaster didn't have issue #1.
Reproducible example
Create a new electron-forge vite + typescript project:
npx create-electron-app@latest my-new-app --template=vite-typescript
Add a public/static_build folder structure to the root folder, and some random static build of a react-router app in there. (You'll have to build it with the same base public url (path) as the source of the iframe)
Add to the index.html
Set appType to mpa in the vite renderer config so that it doesn't create an infinity mirror when it inevitably fails to load.
Voilà.
Run the development environment with
npm startto see how it fails to find theindex.htmlfrom the folder path.Change the
srcto/static_build/index.htmland run again to see how that breaks routing.Change the
srcto./static_build/(and rebuild the embedded app with that base path) and package to see how that compounds.
Thank you very much in advance.