what is the recommended way to use values from a vite manifest file in the initially rendered html on cloudflare pages? #208
Description
hi, I am trying to do the following:
- render the initial html shell from hono
- have a single page app take over client side
- use tailwindcss
locally, I import the css in the client entry point file and vite injects the styles on the page. 🚀
when I build, I want to grab the generated css path from the manifest.
- tried reading the file with
fs- not supported on cloudflare pages - tried doing a dynamic import of the file, one flavor was a top level await, which seems to be not supported in cloudflare pages
- tried dynamic import in the handler, does not seem to be available in terms of file path.
I am able to import the json that is produced when the client is built first, then the server is built so it works, but then i'm left with locally coming up with some way to avoid this.
is there a recommended approach?
import { Hono } from "hono";
import { renderToString } from "react-dom/server";
// import manifest from "../dist/.vite/manifest.json";
// let cssFile: string | undefined = manifest["src/client.tsx"]?.css?.at(0);
// if (import.meta.env.PROD && !cssFile) {
// cssFile = (await import(manifestPath)).default["src/client.tsx"]?.css?.at(0);
// }
const cssFile = null;
const app = new Hono();
app.get("*", async (c) => {
return c.html(
renderToString(
<html>
<head>
<meta charSet="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
{cssFile ? <link rel="stylesheet" href={cssFile} /> : null}
{import.meta.env.PROD ? (
<script type="module" src="/static/client.js"></script>
) : (
<script type="module" src="/src/client.tsx"></script>
)}
</head>
<body>
<div id="root"></div>
</body>
</html>
)
);
});
export default app;some sample code to illustrate. this works when I deploy, but if you haven't built locally it fails due to the json fiel not being present,.