reactアプリとfirebase

● reactアプリの初期化(TypeScript)

reactアプリの初期化(TypeScript)

npx create-react-app test-app --template typescript

reactアプリの初期化(JavaScript + TailwindCSS)

npx create-next-app my-first-next-with-tailwind -e with-tailwindcss

● firebase の 初期化

firebase-tools のインストール

npm install -g firebase-tools

バージョン8を指定して入れる場合は以下のようにインストールします
(バージョン9からファイルサイズが小さくなったため 9がオススメですが。)

npm install -g firebase-tools@8
firebase --version
8.20.0

一旦ログアウトしてから再度ログイン

firebase-tools のバージョン違いによりエラーが出ることがあるので一旦ログアウトを行ってから再度ログインします

 firebase logout
 firebase login

プロジェクト一覧の表示

firebase projects:list

firebaseの設定

firebase init

例えば以下のように質問に答えます

? Which Firebase features do you want to set up for this directory?
→ (ホスティングを行う場合) ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
→ (Firestoreを使う場合) ◯ Firestore: Configure security rules and indexes files for Firestore


? What do you want to use as your public directory? 
→ build

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 
→ y

? Set up automatic builds and deploys with GitHub? (y/N) n
→ n

● firebase へデプロイ

npm run build
firebase deploy
Hosting URL: https://my-app-xxxxx.web.app

● firebaseへデプロイしたアプリを削除

firebase hosting:disable

URLにアクセスしてNOT FOUNDになっていることを確認します。

No.2036
10/01 15:02

edit