React + TypeScript + Firebase環境を超高速で作る

React + TypeScriptの環境を作る

基本は以下ドキュメントのままやれば大丈夫。
https://facebook.github.io/create-react-app/docs/adding-typescript

create react-appで雛形を作成。

yarn create react-app my-app --typescript

必要なパッケージをインストール。

cd my-app
yarn add typescript @types/node @types/react @types/react-dom @types/jest
yarn add firebase @types/firebase

以下コマンドを打つと、ブラウザが起動しサンプルのページが表示される。

yarn start

これでReact + TypeScriptの環境ができた！

Firebase環境のセットアップ

https://console.firebase.google.com へアクセス。
以下のような画面が表示されるので、[プロジェクトを追加]を選択。

プロジェクト名、地域、リージョンを選択してプロジェクトを作成。

プロジェクトが作成されると、ダッシュボード画面が表示される。
Webアプリを作る場合は、</>ボタンをクリックしてアプリの作成を始める。

アプリができたら、歯車マークをクリックする。

プロジェクトの設定画面が表示される。
画面下の方に行くとapiKeyとかの記述があるので、それを元にconfigファイルを作成する。
(apiKeyが表示されない場合は[Firebase SDK snippet]ラジオボックスの[CDN]を選択する。)

/config/firebase.ts

import firebase from 'firebase';

const config = {
  apiKey: "your-api-key",
  authDomain: "your-app-name.firebaseapp.com",
  databaseURL: "https://your-app-name.firebaseio.com",
  projectId: "your-app-name",
  storageBucket: "your-app-name.appspot.com",
  messagingSenderId: "your-messagind-sender-id",
  appId: "your-app-id"
};

firebase.initializeApp(config);

export default firebase;

firebaseにコンソールからログインする。

firebase login

firebaseの初期設定をする。
画面に従って設定すると自動でいろんなファイルが作られる。
ここではpublicフォルダ配下のファイルを上書きするか聞かれるが、拒否しよう。

firebase init

ここまで来ればもうFirebaseが使える。
試しにユーザー作成をしてみる。
Firebase Console にログインし、[Authentication]⇒[ログイン方法]から、[メール/パスワード]を有効にしておく。
その後、React側で以下記述でユーザー作成ができるようになる。

login.tsx

import firebase from 'firebase';
import firebaseConfig from './config/firebase';

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(user => {
    alert("register complete!")
  })
  .catch(error => {
    alert('firebase error :' + error);
  });

アプリのデプロイ

せっかくなのでアプリをデプロイしよう。
まずはfirebase-toolsをインストールする。

npm install -g firebase-tools

アプリをビルドする。

yarn build

デプロイする。これで以下URLでアプリにアクセスできるようになる。
https://your-app-name.firebaseapp.com/

firebase deploy