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

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

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

ต้องเล่าก่อนว่า 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

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

$ firebase login

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

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

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

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

$ yarn start
หรือ 
$ npm start

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

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

https://medium.com/media/563e16e47ce73e2b478ad7c6a21f4c4d/href

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

https://medium.com/media/c56d247924dfebdddb55e10c02095f72/href

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

$ yarn start
หรือ 
$ npm run start

Initial project

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

Firebase

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

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

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

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

$ firebase init

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

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

$ yarn deploy 
หรือ 
$ npm run deploy

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

Deploy to firebase hosting

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

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

https://thanawatgulati.com

thanawatgulati - Overview

---