In my scenario I'm trying to upload my react app to a website via our CMS. However, I can only copy-paste a block of html into the cms and don't have access to upload any files. I know this is an uncommon scenario but unfortunately I have to work with this restriction.
So far, I've been building my app with vite then copying a html block of this structure into the cms:
<div id="vite-root"></div>
<script>
<!-- content of build output file index-[hash].js -->
</script>
Now, I want to add static-site-generation to this, i.e. prerendering the html at build time on my machine and then hydrate it on client side. I know I don't have chances to preload/chunk any JS code here, BUT I'd like to have an initial html that is displayed right away before the full JS is loaded and executed.
To do this, I'm including vite-plugin-ssr to my setup and added ssr({ prerender: true }),
to my vite-config.ts
as explained here. After building i get html like this:
<div id="page-view">
<!-- prerendered html -->
</div>
<script type="module" src="/assets/entries/entry-server-routing.4f94461a.js" defer></script>
<link rel="modulepreload" href="/assets/entries/src_pages_index.page.e062d874.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-abc34737.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/entries/src_renderer_default.page.client.1be32298.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-078aa1fb.js" as="script" type="text/javascript">
<script id="vite-plugin-ssr_pageContext" type="application/json">{"pageContext":{"_pageId":"/src/pages/index"}}</script>
This is already very close to what I need, but I'd need to have that result as a single html file without the chunking/preloading and with all scrtips inline.
Do you have any ideas how I can achieve this? I'm also open to use other frameworks or build plugins. Thanks a lot!
EDIT: If you think this whole approach is not actually worth it or doesn't make sense in any way, pleas let me know why.