如何發布 react 專案到 firebase

在本篇文章中，我們將會討論到兩個重點

1. 如何透過 create-react-app 這個指令建立 react 專案
2. 如何將 react 專案發布至 firebase

在閱讀文章之前，請先確定

1. 對 react 有基礎的了解，至少知道 react 是什麼
2. 系統中已經安裝 npm 與 nodejs
3. 知道如何使用指令 (command line)

我們將分成三個步驟討論

1. 建立 firebase 專案
2. 建立 react 專案
3. 發布至 firebase

步驟一 建立 firebase 專案

首先，連結到 firebase console，並新增一個專案，名稱（react-firebase-sample）與地區（台灣）可自訂

專案建立成功後，請記得專案的名稱，後面步驟會需要用到

＊目前 firebase 有提供免費方案，所以不用擔心會有額外花費

步驟二 建立 react 專案

首先請確認已安裝 create-react-app。如果還沒有安裝過可以透過 npm i -g create-react-app 進行安裝並利用 create-react-app -V 來確認版本。

接下來執行 create-react-app react-firebase 來建立 react 專案

＊ react-firebase 為專案名稱，可自訂 

接著就會看到 create-react-app 幫我們自動建立 react 專案並安裝需要的模組。完成後，進入 react-firebase 資料夾（資料夾名稱就是透過 create-react-app 建立專案時的名稱）並執行 npm start 就可以看到 react 已經成功運行在 http://localhost:3000 的位置。

同時，react 也會開啟瀏覽器

這樣就表示 react 專案已經被成功建立。

步驟三 發布至 firebase

接下來準備發佈至 firebase。由於 react 預設會運行在開發模式（development mode）我們如果要將專案發布至正式環境（例如 firebase），通常會將專案進行最佳化，刪除一些不必要的檔案，並進行精簡以利達到最佳的執行狀況。我們可以透過 npm run build 來進行最佳化，最終檔案會被放置在專案底下 build 這個資料夾。
接著我們將利用 firebase-tool 這個 CLI （command line interface）來幫助我們將 react 專案發佈至 firebase。

＊本篇文章使用的 firebase-tools 版本為 3.9.2 

可以透過 npm install -g firebase-tools 這個指令來安裝 firebase-tools
安裝完成後請進入到專案目錄中並執行 firebase init ，接著 firebase-tools 就會引導你連結 react 專案與 firebase 專案，步驟如下

＊使用前請確認已登入 firebase，可利用 firebase login 進行登入

What Firebase CLI features do you want to setup for this folder? 

1. Database: Deploy Firebase Realtime Database Rules
2. Functions: Configure and deploy Cloud Functions
3. Hosting: Configure and deploy Firebase Hosting sites

如果需要使用到 firebase 提供的即時資料庫則選第一項，如果設定託管網頁（Hosting）則選第三項。這邊我們先選擇第一項因為下一篇文章中我們需要用到 firebae 的即時資料庫

What Firebase project do you want to associate as default?

這裏選擇步驟一所建立的 firebase 專案名稱 react-firebase-sample

What file should be used for Database Rules?

這裡會建立一個檔案供資料庫使用，使用預設檔案（database.rules.json）即可

再執行一次 firebase init，這次選擇 Hosting: Configure and deploy Firebase Hosting sites，接著它會提示

What do you want to use as your public directory?
鍵入 build，設定 build 為發布目錄

Configure as a single-page app (rewrite all urls to /index.html)?
選則 Y，將所有 request 導向 index.html

最後利用指令 firebase deploy  將 react 部署至 firebase。部署成功後最後會提示 Hosting 的位置，例如 https://react-firebase-sample-beb83.firebaseapp.com ，這個位置就可以公開被存取即表示部署工作已完成

下一篇：存取 firebase 即時資料庫

參考連結：All you need is React & Firebase
bitbucket 連結：react-firebase