Comments (5)
Great. I will try it.
from honox.
(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 dist
directory.
(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 Script
component.
// 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>
);
});
from honox.
Thanks! I'll check the details later!
from honox.
Hi, looks like it's working this time, I believe.
in short: Just work with build client and toSSG
into dist
. For my usecase, @hono/vite-ssg
is useless.
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 log
$ bun run build
$ vite build --mode client && vite build
vite v5.1.3 building for client...
✓ 23 modules transformed.
.hono/.vite/manifest.json 0.37 kB │ gzip: 0.19 kB
.hono/static/counter-CDwTLWFe.js 0.22 kB │ gzip: 0.20 kB
.hono/static/client-DnYkLGI4.js 6.54 kB │ gzip: 3.09 kB
✓ built in 99ms
GET /
Build files into temp directory: .hono
Generated: .hono/index.html
vite v5.1.3 building for production...
✓ 6 modules transformed.
../dist/index.html 0.51 kB │ gzip: 0.36 kB
../dist/assets/counter-CDwTLWFe-B0y06f1g.js 0.22 kB │ gzip: 0.20 kB
../dist/assets/index-D-Zp7aOz.js 8.22 kB │ gzip: 3.58 kB
✓ built in 63ms
Build takes following steps:
vite build --mode client
.- Clean up
.hono
directory and emit client bundles and manifest.json .
- Clean up
vite build
.@hono/vite-ssg
generates pages bytoSSG
into.hono
directory.- The pages have reference to the client bundles, thanks to manifest.json .
- Vite builds with pages generated in the former step in
.hono
directory. - Emit final bundles and pages into
dist
directory.
toSSG
-> vite build
generates __vite__mapDeps.viteFileDeps
twice . But there is no error because __vite__mapDeps.viteFileDeps
is empty.
This is remote cause the weird errors described in #48 (comment) .
But, I think we don't need the step 2-ii, 2-iii . Just work with build client and toSSG
into dist
, right?
This fundamentally resolves the problem surrounding __vite__mapDeps.viteFileDeps
.
So what I want is just like this:
vite build
withplugins: [client()]
- Run
build.ts
that contains https://github.com/honojs/vite-plugins/blob/55e3abfb8017c7ee9606458da665e3f09e0d428f/packages/ssg/src/ssg.ts#L34-L50 , withNODE_ENV=production
from honox.
Hi @berlysia
Sorry to be late!
But, I think we don't need the step 2-ii, 2-iii . Just work with build client and
toSSG
intodist
, right?
Indeed, you are right. I've looked into your sample repository, that's simple and great! Perhaps, we can apply that way to the @hono/vite-ssg
. Can you try to fix the @hono/vite-ssg
to support it?
from honox.
Related Issues (20)
- Routing priority HOT 5
- Get the current rendering HTTP path in the `_renderer.tsx`
- _worker.js optimization HOT 2
- methodOverride middleware doesn't work HOT 2
- Use mutationObserver to monitor for new components on the screen
- <honox-island> tag breaks direct child CSS HOT 10
- Using the React library in HonoX with hono/jsx/dom HOT 1
- Nested islands hydrate error HOT 1
- Build break by missing file or directory react/jsx-runtime?inside-island HOT 1
- When island components are nested, the child island is broken HOT 6
- Nested islands hydrate error 2 HOT 2
- Support named export not only `default` in Islands HOT 1
- support CSP nonce for `<Script>` component HOT 1
- Use comments instead of `honox-island` for marking islands HOT 3
- It would be nice to place islands anywhere, not just in routes and islands directories. HOT 4
- Is it possible to use React component frameworks? HOT 1
- Partials HOT 1
- `Script` and `HasIsland` to be available even if react is used for runtime HOT 2
- `nonce` attribute should be added only in production? HOT 4
- React Server Components (RSC) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from honox.