Repository files navigation

This project was bootstrapped withCreate React App.

• Firebase setup
• Authentication
• Database: Retrieve and push data
• Cloud Storage: Upload file and save to database
• Cloud Functions: Cloud Messaging, Message notification

• Create your Firebase Project inhttp://console.firebase.google.com.
• Copy config in dashboard'sWeb Setup and paste tofirebase.js.
• Clone project and install dependencies.

> git clone > cd react-firebase> npm install

SeeFirebase Authentication docs.firebase.auth()

Sign-In method is usingGoogleAuthProvider with a pop-up window. WhenComponentDidMount was called,auth.onAuthStateChanged will listen to current auth user state. When the user is logged-in, user state in the component will set.

SeeFirebase Authentication docs.firebase.database()

Initially created an objectguides as our first collection to push our data. TheguidesRef is the database reference for theguides object in firebase.Pushing the new data will also add the current User id, who created the data.

SeeFirebase Storage docs.firebase.storage()

We have file input to accept images (png|gif|jpeg),onChange will upload the file first to the given storage ref and then get the file path and save tousers in database.We can also listen to state changes while the file is uploading which we can display the percentage of the upload progress.

SeeCloud Functions for more details.Checkout theexamples of other functionsThe example here is creating message alert using cloud functions

Follow this steps to get started.

1. Create a file namedfirebase-messaging-sw.js in public folder to serve it statically in the host.This file is ourService Worker for messaging. Follow thisguide.You can find yoursender id located at your projectsettings > cloud functions > sender id

• Create handler here for showing the notification in the device.

2. Create the function infunction/index.js. See the file.

3. Create filerequest-messaging-permission to notify new logged-in users if they want to allow notification.

• Apply this method during user login in the app.

4. Check function logs in firebase console.

1. InstallFirebase Tools globally. (You may needsudo here)

> npm install -g firebase-tools

2. Login to firebase using this tool in CLI

> firebase login

3. CD to your working project and initialize firebase.

> cd react-firebase> firebase init

4. Configure firebase:

• Allow CLI features forDatabase,Functions,Hosting.
• Select your Firebase project to be used.
• Accept default rules to write on default filedatabase.rules.json
• Install dependencies.
• Choose abuild name directory since we build our app.
• SelectYes for configuring single app page. This is suitable also when app is usingreact-router.
• Firebase initialization complete!

5. Then we will build our app.

> npm build

6. Deploy!

> firebase deploy

Access your running application to the givenHosting URL.

Important

• Make sure to rebuild your app if you made changes and want to deploy again.
• If you only edited the firebase-generated folderfunctions/**, you can just deploy by runningfirebase deploy --only functions.