Open3
Preact + vite, pages デプロイ
knaka Tech-Blog概要
Preact + pagesで、 SPA構成的なメモです。
- API serverは、workers + hono
- MPAでもなく、 CSRぽい構成です
- d1に、データ保存します
[ 公開: 2024/01/01 ]
環境
- Preact: 10.19.3
- vite
- cloudflare pages
- cloudflare D1
- hono
参考
- vite + cloudflare-pages
- vite+ react, install
上記の、vite参考ページ
- install
npm create vite@latest
- preact, 選択します。
- ファイルサイズは、70M程でした。コンパクトと思います。
- pages deploy
npm i --save wrangler
npx wrangler -v
npx wrangler login
npx wrangler pages deploy dist
- package.json
{
"name": "preact_page1",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"preact": "^10.19.3",
"wrangler": "^3.22.1"
},
"devDependencies": {
"@preact/preset-vite": "^2.7.0",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}
}
- vite.config.ts
vite.config.ts
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
})