SSG + Client script #48
Comments
|
(edited) I thought "it works!" but there is errors. I folded up what I was writing. References which points to generated codes built by client build cause not found and fallback to index.html And previous workarounds 1 and 2 are also have same problem, but there is no error because the files by client build is also in
(folded)(update) Just work with this configuration: // vite.config.ts
import honox from "honox/vite";
import client from "honox/vite/client";
import { defineConfig } from "vite";
import ssg from "@hono/vite-ssg";
const entry = "./app/server.ts";
export default defineConfig(({ mode, command }) => {
if (mode === "client") {
return {
plugins: [client()],
build: {
outDir: ".hono",
},
};
}
return {
plugins: [honox(), ssg({ entry })],
};
});And fix manifest position for // app/routes/_renderer.tsx
import { Style } from "hono/css";
import { jsxRenderer } from "hono/jsx-renderer";
import { Script } from "honox/server";
import { Manifest } from "vite";
// here
const manifestFile = Object.values(
import.meta.glob<{ default: Manifest }>("/.hono/.vite/manifest.json", {
eager: true,
}),
)[0];
const manifest = manifestFile.default;
export default jsxRenderer(({ children, title }) => {
return (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<Script src="/app/client.ts" manifest={manifest} />
<Style />
</head>
<body>{children}</body>
</html>
);
}); |
|
Thanks! I'll check the details later! |
|
Hi, looks like it's working this time, I believe. in short: Just work with build client and Sample repository is here (and deployed here). ◆If you have no time, you can skip to after <hr /> 😉◆ In my investigation, following config achieves the subject. vite.config.ts// vite.config.ts
import ssg from "@hono/vite-ssg";
import honox from "honox/vite";
import client from "honox/vite/client";
import { defineConfig } from "vite";
import devServer from "@hono/vite-dev-server";
const entry = "app/server.ts";
export default defineConfig(({ mode }) => {
if (mode === "client") {
// Client build
return {
plugins: [client()],
build: {
outDir: ".hono", // <--
emptyOutDir: true,
},
};
}
{
// SSG build
return {
plugins: [
honox(),
devServer({ entry }),
ssg({ entry }),
],
};
}
});build logBuild takes following steps:
But, I think we don't need the step 2-ii, 2-iii . Just work with build client and So what I want is just like this:
|
|
Hi @berlysia Sorry to be late!
Indeed, you are right. I've looked into your sample repository, that's simple and great! Perhaps, we can apply that way to the |
|
Great. I will try it. |
What is the feature you are proposing?
(update) Does not work even with the steps written in the README , there is no client bundles!
Currently,
@hono/vite-ssgandhonox/vite/clientcombination cannot work in naive way.vite build --mode client && vite buildresults the latter build cleanups the former.vite build. A generated client script referenced byScriptcomponent cannot resolve by Vite.current `vite.config.ts` file example
An error log of server build
Use of
build.rollupOptions.externaldoes not work. A generated script element will be removed in a generated HTML.WORKAROUND for 1: Write a custom plugin that build.emptyOutDir set to false.
This derives from build.emptyOutDir set to true by @hono/vite-ssg .
WORKAROUND for 2: Use resolve.alias.
`vite.config.ts` file with workaround
The text was updated successfully, but these errors were encountered: