はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった Remix に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
Remix に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
前提
本シリーズでは Turborepo によるモノレポ管理を行っています。
単体で Remix を導入する場合は適宜プロジェクト作成先パスを変更して下さい。
Remix の導入
apps配下にRemixのプロジェクトを作成します。
# Turborepoの場合
pnpm create remix@latest apps/remix-client
# 単体の場合
npm create remix@latest remix-client
--template <テンプレートの種類> でテンプレートの指定も可能です。
(参考: create-remix---template)
対話型プロジェクトセットアップ
git リポジトリの初期化
今回は初期化を行います。
※ お好みで選んでください。
Initialize a new git repository?
> Yes
パッケージをインストールするかどうか
今回は Turborepo で管理するので pnpm でインストールします。
※ お好みで選んでください。
Install dependencies with pnpm?
> Yes
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
remix v2.15.0 💿 Let's build a better website...
◼ Directory: Using apps/remix-client as project directory
◼ Using basic template See https://remix.run/guides/templates for more
✔ Template copied
git Initialize a new git repository?
Yes
deps Install dependencies with pnpm?
Yes
✔ Dependencies installed
✔ Git initialized
done That's it!
Enter your project directory using cd ./apps/remix-client
Check out README.md for development and deploy instructions.
Join the community at https://rmx.as/discord
今回はモノレポで管理しているのでapps配下にremix-clientという名前でミニマムテンプレートのプロジェクトを作成しました。
Remix プロジェクトの立ち上げ
dev コマンドでローカル環境の立ち上げます。
# モノレポの場合 (ルートで実行)
pnpm --filter remix-client dev
↑ のコマンドで立ち上がらない場合は package.json の nameフィールド が remix-client に設定されているか確認して下さい。
# 単体の場合
npm install
npm run dev
ブラウザで確認
ブラウザで http://localhost:5174 を開くと、"Welcome to Remix" と表示されます。
おわりに
たったの 2 ステップであっという間に Remix プロジェクトをセットアップする事が出来ました。
テンプレートの種類も豊富なので必要なツールを兼ね備えたプロジェクトを簡単に立ち上げる事が出来そうです。(参考: Templates And Stacks)
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 9 記事目です。
次の記事はこちら Remix の世界: UI 構築とトランジション #3