Nitro 設定、React Vue Svelte

### 概要

• Nitro メモになります。

[ 公開 2025/03/01 ]

---

### 構成

• Nitro
• Cloudflare
• node 20

---

### 参考

• https://nitro.build/deploy/providers/cloudflare#cloudflare-pages

• Nitro インストール参考

• https://nitro.build/guide

---

### 手順

• nitro install　後

npm i wrangler
npx wrangler login

• build

NITRO_PRESET=cloudflare_module npm run build

---

• wrangler.toml , 参考

name = "nitro-app-2"
compatibility_date = "2024-09-19"
main = "./.output/server/index.mjs"

assets = { directory = "./.output/public/", binding = "ASSETS" }

[vars]
NITRO_HELLO_THERE="general"
SECRET="secret"

---

• deploy , 以外と簡単でした。

npx wrangler deploy

---

### public フォルダから。jsファイル読み込む例

• 初期設定 で、publicフォルダからファイル読めないようでした。
• npx giget@latest nitro nitro-app --install の場合。

---

• フォルダ構成の変更 の例。
• public , routesのフォルダ作成
• 又は、server/routes を。./routes に移動
• server フォルダ削除

├─public
└─routes

---

• nitro.config.ts
• compatibilityDate 以外、一旦削除します。

export default defineNitroConfig({
  compatibilityDate: "2025-03-06"
});

---

• routes/index.ts の、例

export default defineEventHandler((event) => {
  return "Start by editing <code>server/routes/index.ts</code>.";
});

---

• 再起動

npm run dev

---

• テスト
• public/test.txt 作成、適当な文字書く。
• http://localhost:3000/test.txt で、読めるようになりました。

---

### React + Nitro構成

• Nitro　React スタック、作成内容になります。
• front コンパイル: vite build

---

### 構成

• Nitro
• React SPA
• node 20
• vercel

---

### 書いたコード

• SPA
• https://github.com/kuc-arc-f/nitro_5ex/tree/main/react_spa

---

• start , http ://localhost:3000 画面起動です。

npx vite build
npm run dev

#OR
npx vite build && npm run dev

---

• 編集時( 別window )

npx nodemon

---

• tree : フォルダ参考
• routes: 画面tsx
• routes/api : API
• src: front file

├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
│   ├── static
│   │   └── entry-client.js
│   ├── test.js
│   └── test.txt
├── routes
│   ├── [name].ts
│   ├── api
│   │   ├── test.ts
│   │   ├── test2.ts
│   │   └── test3.ts
│   ├── hello.get.ts
│   └── index.ts
├── src
│   ├── App.tsx
│   └── entry-client.tsx
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts

---