Open3
React, Vite, TypeScript, TailwindCSSで環境構築する & Vite Tips集📝
まさぴょん🐱React, Vite, TypeScript, TailwindCSSで環境構築する📝
pnpm create vite
フレームワーク選択📝
variant 選択📝
pnpm create vite
.../195e629418d-15103 | +1 +
.../195e629418d-15103 | Progress: resolved 1, reused 0, downloaded 1, added 1, done
│
◇ Project name:
│ frontend
│
◇ Select a framework:
│ React
│
◇ Select a variant:
│ TypeScript + SWC
│
◇ Scaffolding project in /Users/masahirosuda/Desktop/giftech2025-team-c/frontend...
│
└ Done. Now run:
cd frontend
pnpm install
pnpm run dev
その他📝
まさぴょん🐱TailwindCSS & shadcn-ui の導入について📝
まさぴょん🐱ViteのPort番号の変更方法について
Viteサーバーのポートを変更するには、いくつかの方法があります。
1. vite.config.ts/js ファイルで設定する
frontend/vite.config.ts
// ... existing code ...
export default defineConfig({
// ... other config ...
server: {
port: 3000, // ここで希望のポート番号を指定
},
})
// ... existing code ...
2. 環境変数を使用する
.envファイルに以下を追加：
VITE_PORT=3000
3. コマンドライン引数を使用する
package.jsonのスクリプトを修正：
frontend/package.json
// ... existing code ...
"scripts": {
"dev": "vite --port 3000",
// ... other scripts ...
}
// ... existing code ...
または直接コマンドラインから：
pnpm run dev -- --port 3000
どの方法でも、指定したポート（例：3000）でViteサーバーが起動します。
ログインするとコメントできます