Skip to content

XeicuLy/remix-template

This branch is 65 commits behind main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
Oct 6, 2024
Jul 27, 2024
Oct 3, 2024
Oct 3, 2024
May 11, 2024
Oct 3, 2024
Jul 27, 2024
Oct 6, 2024
Jul 27, 2024
Oct 3, 2024
Jul 27, 2024
May 18, 2024
Oct 6, 2024
Oct 6, 2024
May 18, 2024
Oct 6, 2024
May 18, 2024
Oct 3, 2024
Aug 11, 2024
Oct 3, 2024

Repository files navigation

ディレクトリ構成

app/
├── components/            # 共通コンポーネント (Presentation Layer)
│   ├── layout/            # レイアウトコンポーネント (header, footer)
│   │   ├── Header.tsx     # ヘッダーコンポーネント
│   │   └── Footer.tsx     # フッターコンポーネント
│   └── ui/                # 純粋なUIコンポーネント (button, modal)
│       ├── Button.tsx     # ボタンコンポーネント
│       └── Modal.tsx      # モーダルコンポーネント
│
├── features/              # 各ページごとの機能 (Feature Element)
│   ├── home/              # ホームページ固有の機能 (Feature Element)
│   │   ├── api/           # ホームページ関連API呼び出し (Data Access Layer)
│   │   │   └── fetchHomeData.server.ts # ホームページ固有のAPI呼び出し
│   │   ├── components/    # ホームページ固有のコンポーネント (Presentation Layer)
│   │   │   ├── HomeHeader.tsx          # ホームページのヘッダーコンポーネント
│   │   │   └── HomeContent.tsx         # ホームページのコンテンツコンポーネント
│   │   └── hooks/         # ホームページのカスタムフック (Business Logic Layer)
│   │       └── useHomeData.ts          # ホームページ用のデータ取得フック
│   │
│   └── profile/           # プロフィールページ固有の機能 (Feature Element)
│       ├── api/           # プロフィール関連API呼び出し (Data Access Layer)
│       │   └── fetchProfileData.server.ts # プロフィールページ固有のAPI呼び出し
│       ├── components/    # プロフィールページ固有のコンポーネント (Presentation Layer)
│       │   ├── ProfileHeader.tsx       # プロフィールページのヘッダーコンポーネント
│       │   └── ProfileContent.tsx      # プロフィールページのコンテンツコンポーネント
│       └── hooks/         # プロフィールのカスタムフック (Business Logic Layer)
│           └── useProfileData.ts       # プロフィール用のデータ取得フック
│
├── hooks/                 # グローバルなカスタムフック (Business Logic Layer)
│   ├── useAuth.ts         # 認証に関するカスタムフック
│   └── useFetch.ts        # データフェッチに関するカスタムフック
│
├── lib/                   # ライブラリに依存した関数 (Business Logic Layer)
│   ├── apiClient.ts       # APIクライアントの設定
│   └── dateUtils.ts       # 日付処理のユーティリティ関数
│
├── routes/                # Remixのルートファイル
│   ├── index.tsx          # ルートページファイル
│   ├── home.tsx           # ホームページのルートファイル
│   ├── profile.tsx        # プロフィールページのルートファイル
│   └── api/               # グローバルなAPIエンドポイント
│        └── sample.server.ts # サンプルAPIエンドポイント
│
├── store/                 # 状態管理 (Business Logic Layer)
│   └── userStore.ts       # ユーザー情報の状態管理
│
├── styles/                # 共通スタイル (Presentation Layer)
│   ├── globals.css        # グローバルスタイル
│   ├── tailwind.css       # Tailwind CSSのスタイル
│   ├── variables.css      # CSS変数
│   └── mixins.css         # ミックスイン
│
├── test/                  # テストファイルディレクトリ
│   ├── e2e/               # エンドツーエンドテスト
│   │   ├── home.e2e.test.ts       # ホームページのE2Eテスト
│   │   └── profile.e2e.test.ts    # プロフィールページのE2Eテスト
│   │
│   ├── integration/       # 統合テスト
│   │   ├── home.integration.test.ts       # ホームページの統合テスト
│   │   └── profile.integration.test.ts    # プロフィールページの統合テスト
│   │
│   └── unit/              # ユニットテスト
│       ├── api.test.ts    # グローバルなAPI通信ロジックのユニットテスト
│       ├── components/    # 共通コンポーネントのユニットテスト
│       │   ├── Header.test.ts    # ヘッダーコンポーネントのユニットテスト
│       │   ├── Footer.test.ts    # フッターコンポーネントのユニットテスト
│       │   ├── Button.test.ts    # ボタンコンポーネントのユニットテスト
│       │   └── Modal.test.ts     # モーダルコンポーネントのユニットテスト
│       ├── features/      # 各ページごとの機能のユニットテスト
│       │   ├── home/      # ホームページのユニットテスト
│       │   │   ├── api/   # ホームページ関連API呼び出しのユニットテスト
│       │   │   │   └── homeApi.test.ts
│       │   │   ├── components/    # ホームページ固有のコンポーネントのユニットテスト
│       │   │   │   └── homeComponent.test.ts
│       │   │   └── hooks/         # ホームページのカスタムフックのユニットテスト
│       │   │       └── homeHook.test.ts
│       │   └── profile/  # プロフィールページのユニットテスト
│       │       ├── api/  # プロフィール関連API呼び出しのユニットテスト
│       │       │   └── profileApi.test.ts
│       │       ├── components/    # プロフィールページ固有のコンポーネントのユニットテスト
│       │       │   └── profileComponent.test.ts
│       │       └── hooks/         # プロフィールのカスタムフックのユニットテスト
│       │           └── profileHook.test.ts
│       ├── hooks/         # グローバルなカスタムフックのユニットテスト
│       │   ├── useAuth.test.ts   # 認証に関するカスタムフックのユニットテスト
│       │   └── useFetch.test.ts  # データフェッチに関するカスタムフックのユニットテスト
│       ├── lib.test.ts    # ライブラリに依存した関数のユニットテスト
│       ├── store.test.ts  # 状態管理のユニットテスト
│       └── utils.test.ts  # ユーティリティ関数のユニットテスト
│
├── types/                 # グローバルな型定義ファイル
│   └── index.d.ts         # 型定義のエントリーポイント
│
└── utils/                 # ユーティリティ関数 (Business Logic Layer)
    ├── format.ts          # 文字列フォーマットに関するユーティリティ
    └── math.ts            # 数値計算に関するユーティリティ

Welcome to Remix + Vite!

📖 See the Remix docs and the Remix Vite docs for details on supported features.

Development

Run the Vite dev server:

pnpm dev

Deployment

First, build your app for production:

pnpm build

Then run the app in production mode:

pnpm start

Now you'll need to pick a host to deploy it to.

Test

Run the vitest test runner:

pnpm test

DIY

If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of npm run build

  • build/server
  • build/client

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published