RX100で撮り歩くブログ

RX100で撮った写真を中心によりよい生活を目指すブログ

React+TypeScript+Firestore

初期手順をよく忘れて、都度調べてるのでメモ程度に

Create React App

npx create-react-app app-name --typescript

Firebase toolを入れておく

npm install -g firebase-tools

ログインしておく

firebase login

Firebaseのプロジェクトを作成

コンソール画面で新しいアプリを追加。

データベースからCloud Firestoreを使えるようにしておく。リージョンはASIA-NORTHEAST1。

FIrebaseの設定

firebase init
Which Firebase CLI features do you want to setup for this folder
Hosting: Configure and deploy Firebase Hosting sitesをスペースキーで選択してリターン
Select a default Firebase project for this directory
webで作成しておいたprojectを選択
What do you want to use as your public directory?
public (何も入力せずリターン)
Configure as a single-page app (rewrite all urls to /index.html)
Y
File public/index.html already exists. Overwrite
n

Firestoreコンソール

Web Appの追加をしてkeyなどを取得

index.tsxに以下を追加

import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "xxxxxxxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

準備はひとまずこれでOK