Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

what is the recommended way to use values from a vite manifest file in the initially rendered html on cloudflare pages? #208

Open
kellyrmilligan opened this issue Jan 7, 2025 · 1 comment
Open

what is the recommended way to use values from a vite manifest file in the initially rendered html on cloudflare pages? #208

kellyrmilligan opened this issue Jan 7, 2025 · 1 comment

Comments

@kellyrmilligan
Copy link

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,.
@yusukebe
Copy link
Member

Hi @kellyrmilligan

Actually, the Link component will read the manifest.json after building client side files:

https://github.com/honojs/honox/blob/04fc5e644c262c67a019c4208dacb8fe1c2d864b/src/server/components/link.tsx#L12

I'm not 100% sure what you'd like to do, but you may do it with this method.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yusukebe @kellyrmilligan