Zenn
Open3

React + vite, pages デプロイ

React
Vite
Cloudflare Pages
Cloudflare D1
knaka Tech-Blogknaka Tech-Blog

概要

React + pagesで、 SPA構成的なメモです。

  • API serverは、workers + hono
  • CORS設定で、フロント通信
  • MPAでもなく、 React CSRぽい構成です
  • react-routerで、ルーティング
  • d1に、データ保存します

[ 公開: 2023/12/17 ]

環境

  • React 18
  • vite
  • cloudflare pages
  • cloudflare D1
  • hono

作成したコード

  • React + pages

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

  • list: src/routes/test/App.tsx
  • API

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

  • d1は、事前にdb作成しておき、設定ファイルで接続する形です。

参考

  • vite + cloudflare-pages

https://ja.vitejs.dev/guide/static-deploy.html#cloudflare-pages

deploy

上記の、vite参考ページ

  • pages deploy
npx wrangler pages deploy dist
  • vite.config.ts
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})
  • package.json
{
  "name": "react18_11pages",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}
knaka Tech-Blogknaka Tech-Blog

tailwindcss

https://tailwindcss.com/docs/guides/vite

  • vite に、tailwindcss追加します
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  • tailwind.config.js
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;