Zenn
Open1

hono + vite + pages + preact.js, CMS作成

Vite
Preact
Cloudflare Pages
Hono
Cloudflare D1
knaka Tech-Blogknaka Tech-Blog

概要

前の、hono + vite + pagesの続編で、簡単なCMS作成メモとなります

  • フルスタック構成、外部APIサービスは未使用
  • markdown入力対応
  • 編集者認証: hono basicAuth
  • 全面的に、TSでコード書く
  • 編集者は、最大１人まで

環境

  • hono: 3.9.0
  • vite: 4.5.0
  • cloudflare pages
  • cloudflare D1
  • preact.js
  • tailwindcss
  • micromodal
  • marked

作成したコード

https://github.com/kuc-arc-f/hono_vite_14cms

  • 関連のパス
  • admin: /admin
  • admin-post-List : /admin/posts
  • admin-post-create: /admin/posts/create
  • admin-post-show: /admin/posts/:id
  • admin-post-edit: /admin/posts/edit/:id
  • 表示系Top：/

GIFアニメ

  • admin/編集画面
  • vite.config.ts
vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'
import devServer from '@hono/vite-dev-server'
import pages from '@hono/vite-cloudflare-pages'
//import preact from "@preact/preset-vite";
//
export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      build: {
        lib: {
          entry: [
            './src/client.ts',
            './src/client/Page2.ts',
            './src/client/Page3.ts',
            './src/client/Page4.ts',
            './src/client/Page5.ts',
            './src/client/AdminPostCreate.ts',
            './src/client/AdminPostShow.ts',
            './src/client/AdminPostEdit.ts',
            './src/client/PostShow.ts',
            './src/client/Test11.ts',
          ],
          formats: ['es'],
          fileName: '[name]',
        },
        rollupOptions: {
          output: {
            dir: './dist/static'
          }
        },
        emptyOutDir: false,
        copyPublicDir: false
      }
    }
  } else {
    return {
      plugins: [
        pages(),
        devServer({
          entry: 'src/index.tsx',
          cf: {
            d1Databases: ['DB'],
            d1Persist: true
          }
        })
      ]
    }
  }
})
  • package.json
{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build && vite build --mode client",
    "preview": "wrangler pages dev dist",
    "deploy": "$npm_execpath run build && wrangler pages deploy dist"
  },
  "dependencies": {
    "hono": "^3.9.0",
    "htm": "^3.1.1",
    "marked": "^9.1.5",
    "micromodal": "^0.4.10",
    "preact": "^10.18.1"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20230914.0",
    "@hono/vite-cloudflare-pages": "^0.0.2",
    "@hono/vite-dev-server": "^0.0.12",
    "@preact/preset-vite": "^2.6.0",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5",
    "vite": "^4.5.0",
    "wrangler": "^3.14.0"
  }
}

deploy

yarn build
yarn deploy