「Vite + Remix」を使用したReact環境構築

自己紹介とか

どうも、こんちには。
新人エンジニアの弁慶と申します

(いつまで新人って名乗れるのでしょうね。
経過年数的には、もう新人ではなく中堅な気もするけど、、、)

まぁここで名乗る分にはいいかな。

最近、業務でReactを触る機会があり、休日にでも遊んでみようかなと、自宅のPCで環境構築をしてみました。少し苦戦したため、今回はその備忘録である。

結論

「Vite + Remix」でReact環境構築を実施する場合は、
RemixプロジェクトにViteをインストールすると楽だよって話。

余談というか、React環境構築の完成までの過程

■なぜやろうと思ったか。
①Viteというツールを使用することで、フロントエンドの環境構築が簡単にできると知る。
②Viteを使って環境構築してみよう！
③remixをインストールすると便利らしい
④remixも同時に使えるようにしよう←いまここ

Viteプロジェクトを作成し、remixをインストールしよう！！

手順①～⑥

①Node.jsのインストール
https://nodejs.org/en/download/prebuilt-installer

②viteのインストール
https://ja.vitejs.dev/guide/

③viteの確認
・cd vite-project
・npm install
・npm run dev
※URLが表示されるため、ブラウザで入力する
　Reactのテストページが表示されれば成功！！

④remixのインストール
npm install remix react-router-dom
npm install @remix-run/react @remix-run/node @remix-run/serve

⑤remixのルーティング先を指定
appフォルダを作成←remixのルーティング先
app\routes\index.tsxを作成←初期表示される
remix.config.jsを作成←appDirectory: "app"を指定する
tsconfig.jsonを修正←"include":["app", "remix.config.js"]を指定する
tsconfig.node.jsonを修正←"include": ["vite.config.ts"]を指定する

⑥viteのルーティング先を修正
vite.config.tsを修正←root:'app'を指定
index.tsxを削除（src\main.tsx?）を参照していたため

viteプロジェクトの実行！！！

いざ、再実行！！！
(以下、PCとの対話である。)

主		　　 :「http://*localhost:5173*/home」

ブラウザ様	：「「「この localhost ページが見つかりません」」」

主		    ：「。。。（Ctrl+F5、ポチっ）」

ブラウザ様	：「。。。」

主		    ：「。。。」

ブラウザ様	：「「「この localhost ページが見つかりません」」」

ぬぉぉぉーーー、失敗したぁぁぁぁ。。。。
その後、いろいろ調整してみるが上手く動作しない。

　
調査中にReact環境構築の方法に関して、気づきがえられた。
それが、「Vite + Remix」を使用した環境構築には2つのアプローチがあることである。

①Viteプロジェクトにて、Remixをインストールする方法
→remixの設定を手動で実施する必要がある

②Remixプロジェクトにて、Viteをインストールする方法
→viteの設定を自動で実施してくれる！！

いままでは、①の対応をしてきたが、②のほうが手動で設定する手間が省けるはず。。。
というわけで、先ほど作成したviteプロジェクトは削除し、remixプロジェクトを作成してみる。

Remixプロジェクトを作成し、Viteをインストールしよう！！

手順①～③

①remixプロジェクトを作成（この時点でviteがインストールされている）
・npx create-remix@latest

※以下のエラーが発生する場合は、npmを最新化する必要があった。
ENOENT: no such file or directory, lstat 'C:\Users\user\AppData\Roaming\npm'

②viteの確認
・cd my-project
・npm install
・npm run dev

③remixのルーティング先を作成
app\routes\home.tsxファイルを作成

export default function Home() {
    return (
      <div>
        <h1>Home Test</h1>
        <p>!!!!!!!!!!!!!!!</p>
      </div>
    );
}

remixプロジェクトの実行！！！

いざ、再再実行！！！
(以下、PCとの対話である。)

主  　　　　　:「http://localhost:5173/home」

ブラウザ様	：「。。。」

主　		：「。。。」

ブラウザ様	：「「「Home \n !!!!!!!!!!!!!!!!!!!」」」

うぉぉぉぉ！！！！！成功だぁぁぁぁl！！！！！！
てか、めちゃくちゃ簡単だな。

まとめ

てな訳で、URLのルーティングに成功したのだった。
。。。。いや、プロジェクト作成しただけで、設定も何もないじゃねーか！！！

　
まぁ、次からはスムーズに対応できるってことでね。

参考URL

-- Vite公式のインストール手順
https://ja.vitejs.dev/guide/

-- Remix公式のインストール手順
https://remix.run/docs/en/main/guides/vite