Made in React Native and Firebase
Firebase hosted web url: https://fir-1ee6c.web.app/
- Notes: there should be a drawer menu icon on the upper left side, but I haven't figured out why the icon disappears, but it can be clicked.
- Firestore setup
- Navigate to your Firebase Console.
- Go to the
Firestore Database
section and click onCreate Database
. - Choose
Start in test mode
andEnable
. - After the database is ready, navigate to it and click on
Start Collection
. - Enter
students
as the Collection ID and hitNext
to create the collection.
- create a .env, and save the apiKey in it.
- use EXPO_PUBLIC_API_KEY or dotenv
- use
expo-constants
package.and importnpx expo install expo-constants
import Constants from 'expo-constants';
- reference: https://firebase.google.com/docs/firestore/manage-data/add-data
- setDoc:If the document does not exist, it will be created. If the document does exist, its contents will be overwritten with the newly provided data.
- resource: https://firebase.google.com/docs/firestore/query-data/get-data
- sample code:
useEffect(() => {
const fetchData = async () => {
const dbCol = collection(db, "students"); //get collection `students`
const dbDocs = await getDocs(dbCol); //get documents
const studentData = [];
dbDocs.forEach((doc) => {
studentData.push(doc.data());
});
setGradebook(studentData);
};
fetchData();
}, []);
- resource: https://docs.expo.dev/workflow/web/
- Install:
npx expo install react-dom react-native-web @expo/webpack-config
- SUPER IMPORTANT!!!! add the following config in App.json:
"web": {
"favicon": "./assets/favicon.png",
"bundler": "metro"
}
- start the dev server, and you are supposed to get a web generated automatically.
npx expo start --web
- Publish your web. Run the following code and you are supposed to have a new folder called
dist
npx expo export -p web
- resource:https://docs.expo.dev/distribution/publishing-websites/#firebase-hosting
- Install the Firebase CLI by running
npm install -g firebase-tools
- run
firebase init
and choose host, or runfirebase init hosting
, and MUST TYPEdist
when the prompt asks the pbulic path. - Then the following prompts questions: NO, NO, NO. (No overwrite, or your web will always be the dafault Firebase page)
- Deploy: run
npm run deploy-hosting
orfirebase deploy