📚

Remix プロジェクトを生成する

2024/03/21に公開

目的

Remix を使用したフルスタックアプリケーションを開発します。
この記事では、 Remix のプロジェクトを生成して、開発環境が起動できることを確認します。

以下のコマンドを実行すると、 Remix のテンプレートからプロジェクトを生成します。
Remix 2.7 から Vite 対応が正式に採用され、デフォルトで Vite 設定が完了しています。

npx create-remix@latest

表示されるウィザードに以下の通り入力します。

質問	入力
Where should we create your new project?	remix_fullstack_blog ( 任意の値 )
Initialize a new git repository?	Yes
Install dependencies with npm?	No ( Yarn のため )

Remix プロジェクトのフォルダに移動します。

cd remix_fullstack_blog

Yarn を使用して、依存ライブラリをインストールします。

yarn install

.gitignore に以下を追記します。

.yarn

開発サーバを起動します。

yarn dev

以下のコマンドを実行します。

open http://localhost:5173/

ブラウザで以下の表示を確認したら完了です。

ツールチェインに Volta を使用する場合は以下の設定をすると、リポジトリで使用するバージョンを固定できます。
バージョン切り替えする手間が減ります。

{
  "volta": {
    "node": "20.11.1",
    "yarn": "4.1.1"
  }
}