Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cotyhamilton/deno-honox
Deno + HonoX
https://github.com/cotyhamilton/deno-honox
deno hono honox
Last synced: 17 days ago
JSON representation
Deno + HonoX
- Host: GitHub
- URL: https://github.com/cotyhamilton/deno-honox
- Owner: cotyhamilton
- Created: 2024-09-30T06:36:42.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-12-31T22:40:42.000Z (25 days ago)
- Last Synced: 2024-12-31T23:29:58.182Z (25 days ago)
- Topics: deno, hono, honox
- Language: TypeScript
- Homepage:
- Size: 43.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# deno + honox
## how to
[Deno 2](https://deno.com/blog/v2.0-release-candidate) is required
```bash
deno upgrade
deno upgrade rc
```
Create [honox project](https://github.com/honojs/honox)
```bash
mkdir deno-honox
cd deno-honox
deno run -A npm:create-hono
# ? Target directory .
# ? Which template do you want to use? x-basic
# ? Do you want to install project dependencies? no
```
Cleanup
```bash
rm package.json tsconfig.json wrangler.toml
deno fmt
```
Install dependencies
```bash
deno add \
npm:hono \
npm:honox \
npm:@hono/vite-build \
npm:@hono/vite-dev-server \
npm:vite
```
Update `deno.json`
```diff
{
+ "tasks": {
+ "dev": "vite",
+ "build": "vite build --mode client && vite build",
+ "preview": "(cd dist && deno serve -R index.js)"
+ },
"imports": {
"@hono/vite-build": "npm:@hono/vite-build@^1.1.0",
"@hono/vite-dev-server": "npm:@hono/vite-dev-server@^0.16.0",
"hono": "npm:hono@^4.6.3",
"honox": "npm:honox@^0.1.25",
"vite": "npm:vite@^5.4.8"
- }
+ },
+ "exclude": [
+ "dist"
+ ],
+ "nodeModulesDir": "auto",
+ "compilerOptions": {
+ "lib": [
+ "esnext",
+ "dom",
+ "deno.ns",
+ "deno.unstable"
+ ],
+ "jsx": "react-jsx",
+ "jsxImportSource": "hono/jsx"
+ }
}
```
Update `vite.config.ts`
```diff
- import build from "@hono/vite-build/cloudflare-pages";
+ import build from "@hono/vite-build/deno";
- import adapter from "@hono/vite-dev-server/cloudflare";
+ import adapter from "@hono/vite-dev-server/node";
import honox from "honox/vite";
import { defineConfig } from "vite";
export default defineConfig({
+ cacheDir: "node_modules/.vite",
+ esbuild: {
+ jsx: "automatic",
+ jsxImportSource: "hono/jsx",
+ },
plugins: [honox({ devServer: { adapter } }), build()],
});
```
Update demo (`app/routes/index.tsx`)
```diff
import { css } from "hono/css";
import { createRoute } from "honox/factory";
- import Counter from "../islands/counter";
+ import Counter from "../islands/counter.tsx";
```
### optional
Add tailwindcss
```bash
deno add \
npm:tailwindcss \
npm:postcss \
npm:autoprefixer
deno run -A npm:tailwindcss init -p --esm --ts
```
Update `tailwind.config.ts`
```diff
import type { Config } from "tailwindcss";
export default {
- content: [],
+ content: ["./app/**/*.{ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
} satisfies Config;
```
Add `app/app.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Update `app/client.ts`
```diff
import { createClient } from "honox/client";
+ import "./app.css"
createClient();
```
Update `app/routes/index.tsx`
```diff
- import { css } from "hono/css";
import { createRoute } from "honox/factory";
import Counter from "../islands/counter.tsx";
- const className = css`
- font-family: sans-serif;
- `;
export default createRoute((c) => {
const name = c.req.query("name") ?? "Hono";
return c.render(
-
+
- Hello, {name}!
+ Hello, {name}!
,
{ title: name },
);
});
```
Update `app/routes/_renderer.tsx`
```diff
- import { Link } from "honox/server";
+ import { Link, Script } from "honox/server";
...
+
```
Update `vite.config.ts`
```diff
- plugins: [honox({ devServer: { adapter } }), build()],
+ plugins: [
+ honox({
+ client: {
+ input: ["/app/app.css"],
+ },
+ devServer: { adapter },
+ }),
+ build(),
+ ],
```
## dev
Install dependencies
```bash
deno install
```
Dev
```bash
deno task dev
```
Build
```bash
deno task build
```
Preview
```bash
deno task preview
```