---
# System prepended metadata

title: React+Firebase 實踐讀書會網站
tags: [' Firebase', SideProject]

---

---
tags: SideProject, Firebase
---

# React+Firebase 實踐讀書會網站

前置作業
- 安裝node.js

1. 建立firebase專案
 ![](https://i.imgur.com/hWOT5nK.png)


![](https://i.imgur.com/O2WNSxJ.png)

![](https://i.imgur.com/quMYbVp.png)
![](https://i.imgur.com/05Sogbp.png)

2. 設定storage
要先開啟storage，不然init時會報錯
![](https://i.imgur.com/RmiSxZB.png)

![](https://i.imgur.com/4L5ruQg.png)

往下捲到這裡
![](https://i.imgur.com/EdqbizF.png)

先使用測試模式，方便開發
![](https://i.imgur.com/OduFxXw.png)

如果畫面跟我的長得不一樣
可以嘗試一下以下的作法
    1. 切換database旁邊，變cloud Firestore
    2. 回到主控版，再連進來一次
![](https://i.imgur.com/RpxS4us.png)

3. 設定資料庫名稱

booking - 存課程資料
memberCard - 存會員資料
![](https://i.imgur.com/WCHA3TD.png)
一定要有第一筆資料才可以開啟db，可以先隨便放個test，，，
![](https://i.imgur.com/qIi4fhY.png)

4. setting

![](https://i.imgur.com/kAX5MwA.png)
![](https://i.imgur.com/fHCiyPq.png)
![](https://i.imgur.com/VIusNDb.png)




4. create-react-app

`
 npx create-react-app YOUR_PJ_NAME
`
會有一段安裝期...請耐心等待
![](https://i.imgur.com/CZzasqW.png)

安裝完後會出現這些資料夾
![](https://i.imgur.com/rM1miGq.png)


  
  可以先用`yarn start` 或`npm run`
  啟動你的create-react-app看看，若成功跑出以下頁面於瀏覽器，就表示有創見成功。
  ![](https://i.imgur.com/2IW2hD5.png)
  
  
  進到下一步之前，
請先cd(移動)到你的create-react-app資料夾中喔
  ![](https://i.imgur.com/BxRMfdn.png)
  
3. 為專案安裝所需的套件
- 安裝 firebase
    - `npm install firebase` or `yarn add firebase`
- 安裝sass　：css編譯
    - `yarn add node-sass`
- 安裝dayjs：時間日期套件
    - `npm install dayjs --save` or
    - `yarn add dayjs --save`
- css frame [material ui](https://material-ui.com/getting-started/installation/) : 
    ```
    // with npm
    npm install @material-ui/core

    // with yarn
    yarn add @material-ui/core
    ```
    還需要另外裝icons的
    `yarn add @material-ui/icons`
    
- classNames : react className好用的管理器
    - `npm install classnames —save`
-  redux:  
```
yarn add redux  
yarn add react-redux  
yarn add redux-thunk 
yarn add react-router-dom  
```


- [react-clipboard.js](https://www.npmjs.com/package/react-clipboard.js?utm_source=recordnotfound.com)
    `npm install clipboard --save`

3. 連結firebase到專案中
`npm install -g firebase-tools`

4. 與firebase雲端連結
`firebase login`
跳出視窗授權google帳號連結，
連結過一次之後，後面就會直接連結好了



5. 初始化firebase

`firebase init`

專案會用到database 及 hoisting
用上下鍵移動，空白鍵可以選擇
enter鍵進到下一步
![](https://i.imgur.com/irz1uVl.png)

連結剛剛建立好的project
![](https://i.imgur.com/mL0tiVC.png)
使用build 資料夾作為上傳到firebase的資料夾
![](https://i.imgur.com/OdjIyYF.png)

Configure as a single-page app (rewrite all urls to /index.html)? Yes
![](https://i.imgur.com/0sIM8bd.png)


完成後資料夾會出現firebase相關設定及檔案
![](https://i.imgur.com/wicQZkE.png)

6. 把檔案貼進src資料夾
7. 找到src下firebase資料夾
setting的config
![](https://i.imgur.com/fqBlmI5.png)
貼到這個位置
![](https://i.imgur.com/xOW9kQF.png)







8.取得firebase config
![](https://i.imgur.com/y9Nmoid.png)
![](https://i.imgur.com/aaYZOGz.png)


9. 設定註冊方式
![](https://i.imgur.com/6CZxLwf.png)

![](https://i.imgur.com/l4hFXG3.png)

10. 在public index 增加head設定
![](https://i.imgur.com/eT2bPNN.png)




11. 輸出網頁
```
yarn build
```

13. 掛到firebase上面
```
firebase deploy

```
