hono-react-ssr-shadcn-ui - GitLite

KO | EN

gitlite — search

#javascript #python #ai #golang #go #machine-learning #rust #deep-learning #linux #docker #macos #awesome #vue #openai

hono-react-ssr-shadcn-ui

(★ 126)

Template code for Honojs with React 19 with SSR, Tailwindcss 4.1, Vite 8, Shadcn-UI, i18n and a simple blog which running on Cloudflare Workers.

파일 탐색기

최종 버전 다운로드 (.zip)

- dependabot.yml
- cloudflare-workers-architecture-optimization.md
- js-code-splitting-plan.md
- _headers
- robots.txt
- - hydrate.tsx
- - Article.tsx
  - SocialShare.tsx
  - TimeAgo.tsx
- - build_time.ts
  - is_prod.ts
- - client.ts
  - schema.ts
- - i18n.tsx
  - manifest.json
  - utils.ts
- - en.json
  - es.json
  - files.ts
  - index.ts
  - zh.json
- - document.tsx
  - manifest.ts
  - renderer.tsx
  - serialize.ts
- - client-shell.tsx
- - BlogList.tsx
  - Blogs.tsx
  - BlogUpdateForm.tsx
  - Hello.tsx
  - ShowPost.tsx
- app.css
- blog.tsx
- client.tsx
- global.d.ts
- index.tsx
- middleware.tsx
- renderer.tsx
- view-loaders.ts
- view.tsx
.gitignore
.prettierrc
AGENTS.md
components.json
drizzle.config.ts
package.json
postcss.config.js
README.md
tailwind.config.js
tsconfig.json
vite.config.ts
worker-configuration.d.ts
wrangler.toml

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/iflamed/hono-react-ssr-shadcn-ui

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd hono-react-ssr-shadcn-ui

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run db:migrate:local

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run typecheck

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run dev

개발/실행 서버를 켭니다.

npm run cf-typegen

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Hono,React,SSR,Shadcn/ui,Cloudflare Workers](https://cdn.dotcopilot.ai/images/admin-c25fca60-b075-4884-896b-f3ba5ac94744-1744827668519.webp)

# Hono-react-ssr-shadcn-ui

Support `Tailwindcss 4.1` `React 19.1` `Vite 8` `i18n` and `Cursor - The AI Code Editor`

> Template code for Honojs with React SSR, Shadcn-UI and a simple blog running on Cloudflare Workers with the official Cloudflare Vite Plugin.

## Online Demo

Home page: [https://hono-react-ssr-shadcn-ui.iflamed.workers.dev/](https://hono-react-ssr-shadcn-ui.iflamed.workers.dev/)

Blogs Page: [https://hono-react-ssr-shadcn-ui.iflamed.workers.dev/blogs](https://hono-react-ssr-shadcn-ui.iflamed.workers.dev/blogs)

## Develop and Deploy

Start the development server

```shell
npm install
# Create/update the local D1 schema
npm run db:migrate:local
# Check TypeScript types
npm run typecheck
# Start the dev server
npm run dev
# Generate Cloudflare binding and runtime types after changing wrangler.toml
npm run cf-typegen
# Build and preview the production Worker locally
npm run build
npm run preview
```

Deploy to Cloudflare Workers

```shell
npm run deploy
```

## Page-level code splitting

Pages are registered as a simple `view name -> dynamic import` map in `src/view-loaders.ts`. `ViewName` is inferred from the map keys, and the matching Vite manifest entry is resolved automatically. The client hydrates only the current page, while SSR loads the same page module on demand. Production HTML emits only the current page's styles and module preloads.

The Cloudflare Vite Plugin builds browser assets into `dist/client` and the Worker into `dist/ssr`. Route handlers and SSR pages remain separate ES modules under `dist/ssr/chunks`; the generated `dist/ssr/wrangler.json` points Workers Assets to `dist/client`.

Static assets use Workers' default asset-first routing, so hashed JS, CSS and files such as `robots.txt` are served without invoking SSR. Requests without a matching asset are handled by the Hono Worker.

See [docs/js-code-splitting-plan.md](./docs/js-code-splitting-plan.md) for the original implementation plan and [docs/cloudflare-workers-architecture-optimization.md](./docs/cloudflare-workers-architecture-optimization.md) for the complete English architecture, optimization, and Pages-to-Workers migration guide.

## Public page cache

The home page, public blog list, and article pages use Hono's cache middleware,
backed by the Cloudflare Workers Cache API, together with Workers Caching in
front of the Worker. Each route creates the middleware with
`createPublicPageCache(maxAgeSeconds, staleIfErrorSeconds)`, so both its normal
TTL and optional error fallback window can be configured at route registration.
The fallback window defaults to seven days.

Responses are varied by the language cookie and `Accept-Language` header.
Authenticated blog administration routes, write operations, errors and all
other responses without an explicit public cache policy use `private, no-store`.
The short normal TTL intentionally avoids explicit cache-purge logic: a blog
update may take up to five minutes to appear in an already cached region.

The Wrangler cache configuration enables cross-version caching. A new Worker
version can therefore reuse the last successful public response; if the Worker
throws, times out or returns `5xx` while refreshing an expired page, Cloudflare
can continue serving that stale response during the configured fallback window.
For production, serve the Worker through a custom domain so the Hono Cache API
layer is also available.

## Blog configuration

### Blog Database

Blog articles are stored in Cloudflare D1 and accessed through Drizzle ORM. The
schema source is `src/db/schema.ts`; generated SQL migrations are committed under
`drizzle/d1`.

For local development, apply all migrations before starting Vite:

```shell
npm run db:migrate:local
npm run dev
```

After changing the schema, generate and verify a migration:

```shell
npm run db:generate -- --name=describe-your-change
npm run db:check
npm run db:migrate:local
```

`wrangler.toml` declares the `DB` binding without a database ID, so Wrangler can
automatically provision the D1 database for this template. The deployment script
builds the application, applies all pending remote migrations, and only then
deploys the Worker:

```shell
npm run deploy
```

For an established production service, avoid the first-deploy provisioning gap:

```shell
npx wrangler d1 create hono-react-ssr-blog
# Add the returned database_name and database_id to the DB block in wrangler.toml
npm run cf-typegen
# Import existing KV records, verify them, and only then deploy the D1 code
npm run deploy
```

`npm run db:migrate:remote` remains available for applying migrations without a
deployment. Drizzle migrations create and upgrade the schema; they do not
automatically copy records from an existing KV namespace.

### Blog's Admin

You can change the open graph infomation of you blog server configuration, just need find these code in the `index.tsx` file like below:

```javascript
app.route(
  "/",
  createBlogServer({
    defaultOGImage:
      "https://aicanvas.app/statics/uploads/1732953286728187318_blog_banner.jpg",
    blogTitle: "Hono React Blog",
    blogDescription: "A place to share stories about Honojs.",
    publisher: "https://x.com/dotcopilot_ai",
  }),
);
```

Open Graph URLs default to the current request origin, which works for `workers.dev`, preview URLs and custom domains. Set the optional `urlPrefix` property only when a separate canonical origin is required.

Then set the password of your blog's administrator, just put below environment to your `.dev.vars` file when it is developing mode.

```shell
BLOG_USERNAME="admin"
BLOG_PASSWORD="123456"
```

For production, keep non-sensitive variables in `wrangler.toml` and upload the administrator password as a Worker secret. `wrangler.toml` declares it as required, so preview and deployment can validate that it exists:

```shell
npx wrangler secret put BLOG_PASSWORD
```

After changing bindings or variables, run `npm run cf-typegen` and commit the updated `worker-configuration.d.ts`.

### Blog's Routes

For Admin: [/blog/list](https://hono-react-ssr-shadcn-ui.iflamed.workers.dev/blog/list)

For Users: [/blogs](https://hono-react-ssr-shadcn-ui.iflamed.workers.dev/blogs)

### Blog Example

TapAI Blog: [https://tapai.aicanvas.app/blogs](https://tapai.aicanvas.app/blogs)

## Sites build with this repo?

1. TapAI: [https://tapai.aicanvas.app/](https://tapai.aicanvas.app/), a site provide a iOS shortcut to boost your productivity, which you can use ChatGPT with TapAI to add calendar, reminder, note easily.

2. Hichly: [https://hichly.com](https://hichly.com), Hichly is the ultimate platform for sharing and refining niche ideas with community feedback to turn your concepts into reality.

3. Dot Copilot: [https://dotcopilot.ai](https://dotcopilot.ai), a non-intrusive and customizable Android AI assistant that simplifies your daily tasks. Parse receipts, manage to-dos, and more—Dot Copilot is here to help without interrupting your workflow.