React + TypeScript + Firebase でリスト作成アプリ作成する①

現在作成中のアプリ「行きたいとこリスト」をReact + TypeScriptで書き直すついでに作成手順をメモしておく。

githubリポジトリはこちら

開発環境

ローカルの環境

• mac Big Sur 11.5 intel
• node version 16.6.0
• yarn version 1.22.10
• エディタ : VScode

本番環境

• firebase

その他

• React
• TypeScript
• github Actions

環境構築

firebase consoleにアクセスし、プロジェクトを作成する。(詳細は省略)

Actionsで自動デプロイするため、githubリポジトリを作成しておく。

ターミナルで以下を実行。my-appは作成するディレクトリの名前に変更する。

yarn create react-app my-app --template typescript

FirebaseとReact Routerをインストール

yarn add firebase react-router-dom

firebaseを初期化。github actionsと連携しておく。

firebase init

上を実行するとfirebase.jsonが作成される。以下のようになっていればOK。

{
    "hosting": {
        "public": "build",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "rewrites": [
            {
                "source": "**",
                "destination": "/index.html"
            }
        ]
    }
}

git を初期化。赤字のリポジトリ名はしようするリポジトリのものに変更。

git init
git remote add origin https://github.com/kanaru-ssk/itl-03.git

firebase Hostingにデプロイしてみる

github にpushすると自動でデプロイされます。ブランチ名masterならmasterに変更

git add .
git commit -m "create react app"
git push origin main

firebaseから提供されたドメインにアクセスしてreactになっていればok

次回はfirebase auth使ってのユーザー認証処理実装する。