Zenn
Open1

hono + pages, memo markdown(マークダウン)

React
Vite
CloudflarePages
Hono
Cloudflare D1
knaka Tech-Blogknaka Tech-Blog

概要

hono react SSR続編になり。今回は memoアプリ的なメモです

  • フルスタック構成
  • d1に、MDデータ保存します

[ 公開: 2023/12/07 ]

環境

  • hono: 3.9.0
  • react-dom
  • cloudflare pages
  • cloudflare D1

作成したコード

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

  • 関連パス: /memo
  • new
  • show

  • show: pages/memo/show/App.tsx

  • new: pages/memo/create/App.tsx

  • 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": {
    "dayjs": "^1.11.10",
    "hono": "^3.10.1",
    "htm": "^3.1.1",
    "marked": "^10.0.0",
    "micromodal": "^0.4.10",
    "moment": "^2.29.4",
    "preact": "^10.19.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20230914.0",
    "@hono/vite-cloudflare-pages": "^0.1.0",
    "@hono/vite-dev-server": "^0.2.0",
    "@preact/preset-vite": "^2.7.0",
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5",
    "vite": "^4.5.0",
    "wrangler": "^3.15.0"
  }
}
  • 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'
//
export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      build: {
        lib: {
          entry: [
            './src/client.ts',
            './src/client/Page2.ts',
            './src/client/Page4.ts',
            './src/client/BookMarkCreate.ts',
            './src/client/BookMarkEdit.ts',
            './src/client/TaskItemCreate.ts',
            './src/client/TaskItemShow.ts',
            './src/client/TaskItemEdit.ts',
            './src/client/TaskProjectIndex.ts',
            './src/client/TaskProjectShow.ts',
            './src/client/TaskProjectEdit.ts',
            './src/client/ErChartIndex.ts',
            './src/client/ErChartShow.ts',
            './src/client/ErChartEdit.ts',
            './src/client/MemoIndex.ts',
            './src/client/MemoCreate.ts',
            './src/client/MemoEdit.ts',
            './src/client/MermaidImport.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
          }
        })
      ]
    }
  }
})