Cloud Firestore , ReactJS and deploy on Firebase Hosting [ EP.1 ]
Tags: react, programming, coding, javascript
Published: 2020-12-03 17:39:00

---
title: Cloud Firestore , ReactJS and deploy on Firebase Hosting [ EP.1 ]
published: true
date: 2020-06-01 16:58:04 UTC
tags: reactjs,programming,coding,javascript
canonical_url: 
cover_image: https://cdn-images-1.medium.com/max/1024/1*B0Av_NnFrCKsyC7gN94ytg.png
---

### Cloud Firestore , ReactJS and deploy on Firebase Hosting [EP.1 ]

เราจะมาลองทำเว็บด้วย Firebase Cloud Firestore และ Hosting กันมาดูกันว่าเราจะทำยังไง

![](https://cdn-images-1.medium.com/max/1024/1*B0Av_NnFrCKsyC7gN94ytg.png)

ต้องเล่าก่อนว่า Cloud Firestore คือ อะไร Cloud Firestore มันก็เปรียบเสมือน NoSQL Database คล้ายๆ กับ MongoDB แต่ส่ิงที่ดีของ Firebase คือ Eco System ที่ดี ไม่ว่าจะ Firebase Auth , Hosting , Realtime Database , Storage อื่นๆอีกมากมาย

มา เรามาเริ่มกันเลยดีกว่าก่อนอื่นสิ่งที่ต้องทำสิ่งแรกคือ ติดตั้ง Firebase-toolsโดยใช้คำสั่งดังนี้ เพื่อที่จะติดตั้ง Firebase-tools แบบ Global

```
$ yarn global add firebase-tools 
หรือ 
$ npm i firebase-tools -g
```

![](https://cdn-images-1.medium.com/max/474/0*FSp7t76srcAVU_wk.gif)

และหลังจากการติดตั้งเสร็จสมบรูณ์จะต้องทำการ Login โดยใช้คำสั่งนี้เพื่อเข้าสู่ระบบ

```
$ firebase login
```

หลังจากพิมพ์คำสั่งนี้ ระบบจะเด้งเปิด Browser ให้ Login ผ่าน Google Account

พอทำการ Login เสร็จ คราวนี่เราดูฝั่งของ Fronted กันต่อ ก่อที่จะทำการ Config Firebase Firestore และ Firebase Hosting วิธีการติดตั้ง React โดยการใช้คำสั่งตามนี้

```
$ npx create-react-app [ชื่อที่อยากจะตั้ง]
```

แล้วหลังจากที่เราเข้ามาในโฟลเดอร์แล้วให้ใช้คำสั่ง

```
$ yarn start
หรือ 
$ npm start
```

สามารถ run ได้ หน้าตาประมาณนี้

![](https://cdn-images-1.medium.com/max/1024/1*OwUugeoD2WBRLOeU0mZiOw.png)

ให้แก้ไฟล์ package.json ตามนี้

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/563e16e47ce73e2b478ad7c6a21f4c4d/href">https://medium.com/media/563e16e47ce73e2b478ad7c6a21f4c4d/href</a></iframe>

พอเราแก้ไขไฟล์ package.json กันแล้ว เราก็มาที่ไฟล์ src/App.js ลองแก้ไขประมาณนี้ดู

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c56d247924dfebdddb55e10c02095f72/href">https://medium.com/media/c56d247924dfebdddb55e10c02095f72/href</a></iframe>

![](https://cdn-images-1.medium.com/max/480/0*G1RAZcLIf4SIH2L9.gif)

หลักจากลองพิมพ์ตามด้านบนแล้วให้เข้า terminal แล้วของพิมพ์

```
$ yarn start
หรือ 
$ npm run start
```

![](https://cdn-images-1.medium.com/max/638/1*2ouqNNG-V6Ya8DLcdq_gsA.png)<figcaption>Initial project</figcaption>

ถ้าขึ้นแบบนี้ แสดงว่า run ได้ ปกติไม่มีปัญหาอะไร คราวนี้เรามา Config Firebase hosting กัน โดยการไปสร้างโปรเจ็คที่เว็บ

[Firebase](https://firebase.google.com)

โดยการทำตามขั้นตอนนี้

ให้มาที่ Console เตือนละนะ ว่าจะต้องเป็น Account เดียวกับที่ firebase login

![](https://cdn-images-1.medium.com/max/480/0*KLTg_CMuFdwH1JZa)

แล้วให้เลือก Add Project ปุ่มเพิ่ม ขนาดมหึมา

![](https://cdn-images-1.medium.com/max/1024/1*CGvC6K1sFW_fSp7lPG2qiA.png)

จะได้มาหน้าแบบนี้ คราวนี้ก็ตั้งชื่อ project ที่อยากจะตั้ง ชื่ออะไรก็ได้ตรงนี้ตามใจ หลังจาที่ใส่เสร็จก็กด Continue และไปต่อกันโลดดดดดดดดดดดดดดดดด ทำตามสิ่งที่เขาให้ทำตามขึ้นตอน ก็จะได้ Project มาคราวนี้เรามา Initial firebase ใน Project กันดีกว่าโดยใช้คำสั่ง

```
$ firebase init
```

![](https://cdn-images-1.medium.com/max/1024/1*6S9M4Po4gitVxTmLTgTiKg.png)

ให้เลื่อนลูกศรลงมาที่ hosting และ กด Spacebar แล้วก็กด Enter พอเรากด Enter ไปแล้วก็เลือก “ Use an existing project ” ก็กด enter ก็จะมี Project มาให้เลือก ก็เลือกตามที่สร้างไว้ได้เลย หลังจากนั้นทำตามภาพนี้

![](https://cdn-images-1.medium.com/max/1024/1*GSbBigHqFRR-a64nK6o8wQ.png)

พอทำตามภาพเสร็จลอง ใช้คำสั่ง

```
$ yarn deploy 
หรือ 
$ npm run deploy
```

แล้วเราจะได้ Link firebase เว็บกลับมาให้ลอง Click เข้าไปดูจะได้หน้าตาแบบ run ในเครื่องเลยยยยยยยยยยย

![](https://cdn-images-1.medium.com/max/664/1*nuDV7mmp8Iwx86t9OaYU8g.png)<figcaption>Deploy to firebase hosting</figcaption>

![](https://cdn-images-1.medium.com/max/720/0*r6SeNzbNphWzCy6_)

เดียว EP.2 เรามาดูการเริ่มใช้ Firestore กัน

สามารถติดตามเพิ่มเติมได้ที่

[https://thanawatgulati.com](https://thanawatgulati.com)

[thanawatgulati - Overview](https://github.com/thanawatgulati)

* * *