テンプレートとスタック

Remix を使い始めたばかりですか?最新バージョンの Remix は現在 React Router v7 です。最新のフレームワーク機能を使用したい場合は、React Router テンプレート を使用してプロジェクトを作成する必要があります。

create-remix を使用して新しいプロジェクトを生成する際、テンプレートまたはスタックを選択することで、迅速に起動して実行できます。テンプレートは、すぐに使い始められる最小限の出発点です。「スタック」は、より完成度が高く、本番環境に近いアーキテクチャ(テスト、データベース、CI、デプロイ構成などの側面を含む可能性あり)を備えたテンプレートです。

テンプレート

--template オプションを指定せずに create-remix を実行すると、Remix App Server を使用した基本的なテンプレートが取得できます。

npx create-remix@latest

TypeScript を使用することに興味がない場合は、代わりに、よりシンプルな Javascript テンプレートをインストールできます。

npx create-remix@latest --template remix-run/remix/templates/remix-javascript

これは、Remix を初めて試してみる場合に最適な出発点です。この出発点を自分で拡張したり、後でより高度なテンプレートに移行したりすることもできます。

公式テンプレート

サーバーをより細かく制御したい場合や、ArcCloudflareDenoなどの非Nodeランタイムにデプロイしたい場合は、Remixリポジトリにある公式テンプレートを試してみてください。

npx create-remix@latest --template remix-run/remix/templates/cloudflare
npx create-remix@latest --template remix-run/remix/templates/cloudflare-workers
npx create-remix@latest --template remix-run/remix/templates/express
npx create-remix@latest --template remix-run/remix/templates/remix
npx create-remix@latest --template remix-run/remix/templates/remix-javascript
 
## SPAモード
npx create-remix@latest --template remix-run/remix/templates/spa
 
## クラシックRemixコンパイラ
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/arc
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/cloudflare-pages
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/cloudflare-workers
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/deno
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/express
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/fly
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/remix
npx create-remix@latest --template remix-run/remix/templates/classic-remix-compiler/remix-javascript

サードパーティ製テンプレート

一部のホスティングプロバイダーは、独自のRemixテンプレートを管理しています。詳細については、以下にリストされている公式の統合ガイドを参照してください。

また、コミュニティ主導の例のリポジトリも提供しています。各例では、Remixのさまざまな機能、パターン、ツール、ホスティングプロバイダーなどが紹介されています。これらは、動作する例をインストールするのと同様の方法で使用できます。

npx create-remix@latest --template remix-run/examples/basic

スタック

テンプレートが、CI/CDパイプライン、データベース、ホスティングプラットフォームに関する意見を提供するほど、本番環境に対応したアプリケーションに近い場合、Remixコミュニティはこれらのテンプレートを「スタック」と呼びます。

公式に提供されているスタックがいくつかありますが、独自のスタックを作成することもできます(詳細は下記を参照)。

機能発表のブログ記事を読む、そしてYouTubeでRemixスタックの動画を見る

公式スタック

公式スタックには、本番アプリケーションに必要な一般的なものがすべて揃っています。

  • データベース
  • 自動デプロイパイプライン
  • 認証
  • テスト
  • Lint/フォーマット/TypeScript

Remixで素晴らしいWebエクスペリエンスを構築するために、完全にセットアップされた状態で、すぐに作業に取り掛かることができます。以下が公式スタックです。

  • The Blues Stack: 長時間稼働するNode.jsサーバーとPostgreSQLデータベースを使用して、エッジ(分散型)にデプロイされます。数百万人のユーザーにサービスを提供する、大規模で高速な本番グレードのアプリケーションを対象としています。
  • The Indie Stack: 永続的なSQLiteデータベースを備えた長時間稼働するNode.jsサーバーにデプロイされます。このスタックは、あなたが管理する動的なデータ(ブログ、マーケティング、コンテンツサイト)を持つWebサイトに最適です。また、MVP、プロトタイプ、および後でBluesスタックに簡単に更新できる概念実証のための、複雑さの低い完璧なブートストラップでもあります。
  • The Grunge Stack: 永続化にDynamoDBを使用し、Node.jsを実行するサーバーレス関数にデプロイされます。数百万人のユーザーにサービスを提供するAWSインフラストラクチャ上に本番グレードのアプリケーションをデプロイしたい人を対象としています。

これらのスタックを使用するには、create-remixを実行するときに--templateオプションを指定します。例:

npx create-remix@latest --template remix-run/blues-stack

はい、これらは音楽ジャンルにちなんで名付けられています。🤘 ロックオン。

コミュニティスタック

GitHubのコミュニティスタックのリストを閲覧することができます。

コミュニティスタックは、create-remixを実行する際に--templateオプションにGitHubのユーザー名/リポジトリの組み合わせを渡すことで使用できます。例:

npx create-remix@latest --template :username/:repo

コミュニティとスタックを共有したい場合は、他の人が見つけられるようにremix-stackトピックでタグ付けすることを忘れないでください。そして、はい、自分のスタックには音楽のサブジャンル(「ロック」ではなく「インディー」など!)にちなんだ名前を付けることをお勧めします。

その他の情報

プライベートテンプレート

もしあなたのテンプレートがプライベートなGitHubリポジトリにある場合、--tokenオプションを使ってGitHubトークンを渡すことができます。

npx create-remix@latest --template your-private/repo --token yourtoken

トークンにはrepoアクセス権限が必要です

ローカルテンプレート

--template オプションには、ローカルディレクトリまたはディスク上の tarball を指定できます。例:

npx create-remix@latest --template /my/remix-stack
npx create-remix@latest --template /my/remix-stack.tar.gz
npx create-remix@latest --template /my/remix-stack.tgz
npx create-remix@latest --template file:///Users/michael/my-remix-stack.tar.gz

カスタムテンプレートのヒント

依存関係のバージョン

package.jsonで依存関係を*に設定した場合、Remix CLIはそれをインストールされたRemixバージョンのセマンティックバージョンのキャレットに変更します。

-   "remix": "*",
+   "remix": "^2.0.0",

これにより、特定のパッケージの最新バージョンにテンプレートを定期的に更新する必要がなくなります。もちろん、そのパッケージのバージョンを手動で管理したい場合は、*を設定する必要はありません。

初期化のカスタマイズ

テンプレートのルートに remix.init/index.js ファイルがある場合、プロジェクトが生成され、依存関係がインストールされた後にそのファイルが実行されます。これにより、テンプレートの初期化の一部として、好きなことを実行する機会が得られます。たとえば、bluesスタックでは、appプロパティはグローバルに一意である必要があるため、remix.init/index.jsファイルを使用して、プロジェクト用に作成されたディレクトリの名前といくつかのランダムな文字に変更します。

remix.init/index.jsを使用して、追加の設定のために開発者にさらに質問をすることもできます(inquirerのようなものを使用)。これを行うために依存関係をインストールする必要がある場合がありますが、これらの依存関係は初期化中にのみ役立ちます。その場合は、依存関係を含むremix.init/package.jsonを作成することもでき、Remix CLIはスクリプトを実行する前にそれらをインストールします。

初期化スクリプトが実行されると、remix.initフォルダーは削除されるため、完成したコードベースを散らかす心配はありません。

消費者はremix.initスクリプトの実行をオプトアウトできることに注意してください。手動でオプトアウトするには、remix initを実行する必要があります。