{"id":21697362,"url":"https://github.com/jeescu/react-firebase","last_synced_at":"2025-04-12T12:20:43.922Z","repository":{"id":88770307,"uuid":"88864318","full_name":"jeescu/react-firebase","owner":"jeescu","description":":fire: Sample React + Firebase setup","archived":false,"fork":false,"pushed_at":"2017-04-25T02:26:22.000Z","size":35,"stargazers_count":45,"open_issues_count":2,"forks_count":24,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T07:03:25.915Z","etag":null,"topics":["firebase","react","sample","setup"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeescu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-20T12:41:21.000Z","updated_at":"2024-08-29T10:06:01.000Z","dependencies_parsed_at":"2023-03-09T00:45:51.595Z","dependency_job_id":null,"html_url":"https://github.com/jeescu/react-firebase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Freact-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Freact-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Freact-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeescu%2Freact-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeescu","download_url":"https://codeload.github.com/jeescu/react-firebase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565179,"owners_count":21125435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","react","sample","setup"],"created_at":"2024-11-25T19:25:03.931Z","updated_at":"2025-04-12T12:20:43.916Z","avatar_url":"https://github.com/jeescu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + Firebase Setup\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\n### Includes:\n- Firebase setup\n- Authentication\n- Database: Retrieve and push data\n- Cloud Storage: Upload file and save to database\n- Cloud Functions: Cloud Messaging, Message notification\n\n### Getting Started\n- Create your Firebase Project in `http://console.firebase.google.com`.\n- Copy config in dashboard's  **Web Setup** and paste to `firebase.js`.\n- Clone project and install dependencies.\n```\n\u003e git clone \n\u003e cd react-firebase\n\u003e npm install\n```\n\n### Authentication\nSee [Firebase Authentication](https://firebase.google.com/docs/auth/web/start) docs.\n`firebase.auth()`\n\nSign-In method is using `GoogleAuthProvider` with a pop-up window. When `ComponentDidMount` was called,\n`auth.onAuthStateChanged` will listen to current auth user state. When the user is logged-in, user state in the component will set.\n\n### Database\nSee [Firebase Authentication](https://firebase.google.com/docs/auth/) docs.\n`firebase.database()`\n\nInitially created an object `guides` as our first collection to push our data. The `guidesRef` is the database reference for the `guides` object in firebase.\nPushing the new data will also add the current User id, who created the data.\n\n### Cloud Storage\nSee [Firebase Storage](https://firebase.google.com/docs/storage/web/start) docs.\n`firebase.storage()`\n\nWe have file input to accept images (`png|gif|jpeg`),\n`onChange` will upload the file first to the given storage ref and then get the file path and save to `users` in database.\nWe can also listen to state changes while the file is uploading which we can display the percentage of the upload progress.\n\n### Cloud Functions\nSee [Cloud Functions](https://firebase.google.com/docs/functions/get-started) for more details.\nCheckout the [examples](https://github.com/firebase/functions-samples) of other functions\nThe example here is creating message alert using cloud functions\n\nFollow this steps to get started.\n1.  Create a file named `firebase-messaging-sw.js` in public folder to serve it statically in the host.\nThis file is our [Service Worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) for messaging. Follow this [guide](https://firebase.google.com/docs/cloud-messaging/js/receive#handle_messages_when_your_web_app_is_in_the_foreground). \nYou can find your **sender id** located at your project `settings \u003e cloud functions \u003e sender id`\n- Create handler here for showing the notification in the device.\n\n2. Create the function in `function/index.js`. See the file.\n\n3. Create file `request-messaging-permission` to notify new logged-in users if they want to allow notification.\n- Apply this method during user login in the app.\n\n4. Check function logs in firebase console.\n\n### Deployment process with firebase\n1. Install **Firebase Tools** globally. (You may need `sudo` here)\n```\n\u003e npm install -g firebase-tools\n```\n2. Login to firebase using this tool in CLI\n```\n\u003e firebase login\n```\n3. CD to your working project and initialize firebase.\n```\n\u003e cd react-firebase\n\u003e firebase init\n```\n4. Configure firebase:\n- Allow CLI features for **Database**, **Functions**, **Hosting**.\n- Select your Firebase project to be used.\n- Accept default rules to write on default file `database.rules.json`\n- Install dependencies.\n- Choose a `build` name directory since we build our app.\n- Select **Yes** for configuring single app page. This is suitable also when app is using `react-router`.\n- **Firebase initialization complete!**\n\n5. Then we will build our app.\n```\n\u003e npm build\n```\n6. Deploy!\n```\n\u003e firebase deploy\n```\nAccess your running application to the given **Hosting URL**.\n\n**__Important__**\n- Make sure to rebuild your app if you made changes and want to deploy again.\n- If you only edited the firebase-generated folder `functions/**`, you can just deploy by running `firebase deploy --only functions`.\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeescu%2Freact-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeescu%2Freact-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeescu%2Freact-firebase/lists"}