https://github.com/chantakan/dev-container_for_react_router
https://github.com/chantakan/dev-container_for_react_router
devcontainer reactrouter reactrouterv7
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chantakan/dev-container_for_react_router
- Owner: chantakan
- Created: 2024-12-09T06:27:01.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-09T06:32:17.000Z (6 months ago)
- Last Synced: 2025-02-14T23:19:25.490Z (4 months ago)
- Topics: devcontainer, reactrouter, reactrouterv7
- Language: TypeScript
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router v7 TypeScript Development Environment
このプロジェクトは、[React Router v7](https://reactrouter.com/)を使用したTypeScript開発環境を提供します。以下の手順に従ってセットアップを行ってください。
## React Router v7について
React Routerは、Reactアプリケーションのための標準的なルーティングライブラリです。バージョン7では、よりシンプルで強力なAPIが提供されています。
## セットアップ方法
### 1. リポジトリをクローン
```bash
git clone https://github.com/chantakan/dev-container_for_React_Router.git
```
### 2. Devcontainerのセットアップ
このプロジェクトは、VS CodeのDevcontainerを使用して開発環境を提供します。以下の手順に従ってセットアップを行ってください。
VS Codeでプロジェクトを開きます。
左下の「><」アイコンをクリックし、「Reopen in Container」を選択します。
### 3. 依存関係のインストール
コンテナ内で以下のコマンドを実行して依存関係をインストールします。
```bash
npm install
```
### 4. 開発サーバーの起動
以下のコマンドを実行して開発サーバーを起動します。
```bash
npm run dev
```
### 5. ブラウザでアプリケーションを確認
ブラウザで以下のURLにアクセスしてアプリケーションを確認します。
http://localhost:5137
vite.config.tsのhost指定
vite.config.tsファイルでは、開発サーバーのホストとポートを指定しています。以下の設定を確認してください。
```ts
// filepath: /home/tom/projects/my-own-product/test-react-router/vite.config.ts
// ...existing code...
server: {
host: true,
port: 5137,
strictPort: true,
watch: {
usePolling: true,
}
}
// ...existing code...
```
この設定により、開発サーバーはポート5137でアクセス可能になります。