Cloud Firestore , ReactJS and deploy on Firebase Hosting [ EP.1 ]
- #react
- #programming
- #coding
- #javascript
Thnawat Gulati
Software Engineer
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 ตามนี้
พอเราแก้ไขไฟล์ package.json กันแล้ว เราก็มาที่ไฟล์ src/App.js ลองแก้ไขประมาณนี้ดู
หลักจากลองพิมพ์ตามด้านบนแล้วให้เข้า terminal แล้วของพิมพ์
$ yarn start
หรือ
$ npm run start
Initial project
ถ้าขึ้นแบบนี้ แสดงว่า run ได้ ปกติไม่มีปัญหาอะไร คราวนี้เรามา Config Firebase hosting กัน โดยการไปสร้างโปรเจ็คที่เว็บ
โดยการทำตามขั้นตอนนี้
ให้มาที่ 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 กัน
สามารถติดตามเพิ่มเติมได้ที่