Remixでド新規でプロジェクトを作ってみよう

概要

下記の公式の方法に従ってRemixの新規のプロジェクトを作ってみる

環境

筆者の実行環境をまとめる

項目	内容	備考
PC	MacBook Pro 16-inch, 2019
OS	14.4（23E214）
ローカルPCのNode.jsバージョン	v18.18.2	Voltaにて管理 node -vコマンドで確認

方法

1. 下記を実行してremixのプロジェクトを作成（todoアプリを作ってみようと思ったので「todo」というプロジェクト名にした。）

   npx create-remix@latest todo
   

2. 「git」の部分でgitのinitの実行可否を聞かれるのでYESを選択してEnterを押下、「deps」の部分で依存パッケージをnpmを使って自動でインストールするか聞かれたのでYESを選択してEnterを押下

   git   Initialize a new git repository? (recommended)
       ● Yes  ○ No
   deps   Install dependencies with npm? (recommended)
       ● Yes  ○ No
   

3. カレントディレクトリに「todo」というディレクトリが作られているはずなので移動

   cd todo
   

4. 下記を実行して先にgitのコミッターの設定を実施

   git config --local user.name "コミッター名"
   git config --local user.email "コミッターメールアドレス"
   

5. Githubにてリモートリポジトリを作成し、下記を実行して一旦push

   git remote add origin リモートリポジトリのアドレス
   

6. デフォルトブランチがmainではなくmasterになっていたので下記の方法で修正

   • https://qiita.com/miriwo/items/f9e85c3a436b25b388c5

7. 下記を実行して念の為パッケージのインストールを実施（「Install dependencies with npm?」をYESにしているので多分不要だけと念の為、、、）

   npm install
   

8. 下記を実行してローカルサーバーを起動

   npm run dev
   

9. 下記のようにターミナル上にローカルサーバーアクセスリンクが出るのでブラウザで開く

   

10. 下記のように表示されれば完了