Vite + React + React Routerでプロジェクトを作ったメモ

今回の材料はこちら:

  • Vite
  • React
  • pnpm
  • React Router (Declarative mode)

プロジェクトをつくる

  • まずは pnpm を導入する。
npm install -g pnpm@latest-10

  • vite でプロジェクトを作る。

  • variant に React Router が存在するが、Declararive mode を使いたいので選択しない（選んだ場合は FrameWork mode になる）。

    • 今回はシンプルにしたいということで・・・

  • SWC はコンパイルが速いらしいのでお試しで選んだ。

pnpm create vite
│
◇  Project name:
│  test-proj-vite
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript + SWC
│
◇  Scaffolding project in /home/logwion/dev/test-proj-vite...
│
└  Done. Now run:

  cd test-proj-vite
  pnpm install
  pnpm run dev

最後の 3 つを実行すると開発環境が立ち上がる。

$ cd test-proj-vite/
logwion:~/test-proj-vite$ pnpm install
Packages: +150
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 201, reused 63, downloaded 87, added 150, done
Downloading @swc/[email protected]: 21.97 MB/21.97 MB, done
Downloading @swc/[email protected]: 16.44 MB/16.44 MB, done

dependencies:
+ react 19.1.0
+ react-dom 19.1.0

devDependencies:
+ @eslint/js 9.28.0
+ @types/react 19.1.7
+ @types/react-dom 19.1.6
+ @vitejs/plugin-react-swc 3.10.2
+ eslint 9.28.0
+ eslint-plugin-react-hooks 5.2.0
+ eslint-plugin-react-refresh 0.4.20
+ globals 16.2.0
+ typescript 5.8.3
+ typescript-eslint 8.34.0
+ vite 6.3.5

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: @swc/core, esbuild.                                               │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

Done in 673ms using pnpm v10.12.1

あとは pnpm run devで立ち上げればおっけー

React Router を雑につかう

  • Login コンポーネントを用意して main.tsx を適当に編集
<StrictMode>
	<BrowserRouter>
		<Routes>
			<Route path="/" element={<App />} />
			<Route path="/login" element={<Login />} />
		</Routes>
	</BrowserRouter>
</StrictMode>

ビルドする 

$ pnpm run build

> [email protected] build /home/mikumo/dev/test-proj-vite
> tsc -b && vite build

vite v6.3.5 building for production...
✓ 41 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.05 kB
dist/assets/index-D8b4DHJx.css    1.39 kB │ gzip:  0.71 kB
dist/assets/index-b_9QMGOO.js   222.72 kB │ gzip: 71.77 kB
✓ built in 575ms

  • 実行後に dist フォルダが生えるのでお好みのサーバーに配置する

  • 静的ファイルの場合は JS でルーティングを処理しているので Nginx or Apache の設定が必要

    • 例えば今回の場合だと/login を開くと物理的なディレクトリに移動しようとして目的のページが表示されない

  • 全部のリクエストを index.html に返すように設定すれば OK

  • Apache の場合

    • 適当なので鵜呑みにしないでください
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>