- Published on
データエンジニアでもフロントエンド開発してみたい!Remixの開発環境を構築する
- Authors
- Name
- Nomad Dev Life
SPAを開発したい
個人開発で、データを表示するWebアプリケーションを作っています。ここまでStreamlitやWriter Frameworkを使って進めて来ました。両方ともとても良いツールなのですが、どうしても細かいところを合わせるのが難しくなってきたので、フロントエンドは別のフレームワークで作ることにしました。
2024年にSPAを開発するなら何が良いか調べてみたところ、どうやらRemixが良さそうなので、Remixに入門したいと思います。
今回はWindows上にRemixの開発環境を構築したいと思います。
Volta
Remixの開発環境を作るのに先立ち、Node.jsやyarnをインストールすることになるのですが、nvm
のように複数のバージョンをインストールして切り替えられるようにしたいところです。しかし、nvm
はWindowsには対応していないので、今回はVoltaを使ってみることにしました。
まずVoltaのzipファイルをダウンロードしてパスを通してみたのですが、Volta自体は使えるものの、Volta経由でインストールしたnode
やyarn
にパスが通らず断念しました。素直にwinget
を使ってインストールしています。
winget install Volta.Volta
node
やyarn
をインストールする際、バージョンを指定しないと、stableなバージョンをインストールしてくれるようなので、早速サクっとインストールしました。
volta install node
volta install yarn
Vite
次にViteを介して(yarn create vite
)、Remixのプロジェクトを作ってみます。私はフロントエンド開発に疎く、Vite
は正直あまりちゃんと理解していないのですが、GitHubのページを見るとIt's fast!
とあるので、取り敢えず使ってみようと思います。
PS D:\works\github> yarn create vite
➤ YN0000: · Yarn 4.5.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-vite@npm:5.5.5
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ A package was added to the project (+ 261.86 KiB).
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 0s 114ms
√ Project name: ... myapp
√ Target directory "myapp" is not empty. Please choose how to proceed: » Ignore files and continue
√ Select a framework: » React
√ Select a variant: » Remix ↗
➤ YN0000: · Yarn 4.5.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-remix@npm:2.14.0, @nodelib/fs.scandir@npm:2.1.5, @nodelib/fs.stat@npm:2.0.5, and 195 more.
➤ YN0000: └ Completed in 1s 908ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 198 packages were added to the project (+ 31.05 MiB).
➤ YN0000: └ Completed in 0s 664ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed in 1s 987ms
➤ YN0000: · Done with warnings in 4s 622ms
Error.captureStackTrace(firstError);
^
Error: create-remix tried to access fs-extra, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: fs-extra
Required by: create-remix@npm:2.14.0 (via C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\)
Require stack:
- C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\index.js
- C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\cli.js
at require$$0.Module._resolveFilename (C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.pnp.cjs:7669:13)
at Function.<anonymous> (node:internal/modules/cjs/loader:1075:27)
at require$$0.Module._load (C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.pnp.cjs:7560:31)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
at Module.require (node:internal/modules/cjs/loader:1340:12)
at require (node:internal/modules/helpers:141:16)
at Object.<anonymous> (C:\Users\(user)\AppData\Local\Temp\xfs-18541c27\dlx-8748\.yarn\cache\create-remix-npm-2.14.0-623faf877b-b0db7e9bbf.zip\node_modules\create-remix\dist\index.js:19:11)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Object.<anonymous> (node:internal/modules/cjs/loader:1689:10)
エラーが出ました。fs-extra
が依存関係として明記されていないようです。ググったら、以下のコメントを見つけました。
どうやら、.yarnrc.yml
に以下の設定を入れて依存関係を定義した後、yarn create vite
を実行すると良さそうです。
問題は、この.yarnrc.yml
をどこに配置するかですが、まだプロジェクト作成前でproject root
には置けそうもないので、ユーザーのhomeディレクトリの配下に配置して再実行したところ、このエラーを回避してRemixのプロジェクトが生成されました。
packageExtensions:
create-remix@*:
dependencies:
'fs-extra': 'latest'
動作確認
Viteを介してRemixのプロジェクトが作成できたら、作成されたプロジェクトディレクトリに移動し、以下のコマンドを実行します。
PS C:\Users\(user)> cd C:\development\github\myapp\
PS C:\development\github\myapp> yarn run dev
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ブラウザでhttp://localhost:5173/にアクセスすると、Remixの画面が表示されました。試しにapp/routes/_index.tsx
の"Quick Start"の5 min
を7 min
に変えてみたところ、即座に反映されました。
おわりに
Remixに入門する為の環境をWindows上に構築しました。Voltaによってnode
やyarn
のバージョンを管理し、Vite/Remixで開発を進めていけそうです。
まだまだフロントエンド開発に不慣れですが、ツール等を使いながら理解し、前に進んでいきたいと思います。