turborepo shadcn ui

警告

Shadcn CLIは、テンプレートを使用してくれておかげで、Shadcn CLIがMonoreposをネイティブにサポートするようになったため、もはやマントされていません。

shadcn/uiを備えたターボレポスターター

これは、shadcn/uiが事前に構成されたターボレポスターターです。

注記

この例では、 pnpmパッケージマネージャーとして使用しています。

NPMバージョンパンバージョン

この例を使用します

リポジトリをクローンします：

git clone https://github.com/dan5py/turborepo-shadcn-ui.git

依存関係をインストールします：

 cd turborepo-shadcn-ui
pnpm install

UIコンポーネントを追加します

事前に作成されたスクリプトを使用します。

pnpm ui add < component-name >

これは、 shadcn/ui CLIのように機能します。

新しいアプリを追加します

Turborepoは、新しいアプリを追加するための簡単なコマンドを提供します。

pnpm turbo gen workspace --name < app-name >

これによりappsディレクトリに新しい空のアプリが作成されます。

必要に応じて、既存のアプリを次のようにコピーできます。

pnpm turbo gen workspace --name < app-name > --copy

注記

アプリをコピーした後、 pnpm installを実行することを忘れないでください。

何が中にありますか？

このターボレポには、次のパッケージ/アプリが含まれています。

アプリとパッケージ

• docs ：next.jsアプリ
• @repo/ui ：スタブ反応コンポーネントライブラリ（ shadcn/uiを搭載）
• @repo/eslint-config ： eslint構成（ eslint-config-nextおよびeslint-config-prettierを含む）
• @repo/typescript-config ： tsconfig.json sモノレポ全体で使用されています

各パッケージ/アプリは100％タイプスクリプトです。

ユーティリティ

このTurborepoには、すでにいくつかの追加のツールがあります。

• 静的タイプチェック用のタイプスクリプト
• コードリントのEslint
• コードのフォーマットのきれい

建てる

すべてのアプリとパッケージを構築するには、次のコマンドを実行します。

 cd turborepo-shadcn-ui
pnpm build

開発する

すべてのアプリとパッケージを開発するには、次のコマンドを実行します。

 cd turborepo-shadcn-ui
pnpm dev

リモートキャッシング

Turborepoは、リモートキャッシュと呼ばれるテクニックを使用して、マシン間でキャッシュアーティファクトを共有し、チームとCI/CDパイプラインとビルドキャッシュを共有できるようにすることができます。

デフォルトでは、Turborepoはローカルにキャッシュされます。リモートキャッシングを有効にするには、Vercelのアカウントが必要になります。アカウントをお持ちでない場合は、次のコマンドを入力できます。

 cd turborepo-shadcn-ui
npx turbo login

これにより、Vercelアカウントを使用してTurborepo CLIが認証されます。

次に、ターボレポのルートから次のコマンドを実行することにより、ターボレポをリモートキャッシュにリンクできます。

npx turbo link

便利なリンク

Turborepoの力について詳しく知る：

• タスク
• キャッシング
• リモートキャッシング
• フィルタリング
• 構成オプション
• CLI使用

Shadcn/uiの詳細をご覧ください：

• ドキュメント