{"id":26967055,"url":"https://github.com/pascal-brand38/firbase-react-helloworld","last_synced_at":"2026-04-10T01:05:17.175Z","repository":{"id":241186930,"uuid":"804577195","full_name":"pascal-brand38/firbase-react-helloworld","owner":"pascal-brand38","description":"Firebase + React + Vite Step by Step","archived":false,"fork":false,"pushed_at":"2024-05-27T16:23:34.000Z","size":68,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-28T00:44:09.061Z","etag":null,"topics":["firebase","firestore","react","vite"],"latest_commit_sha":null,"homepage":"https://firbase-react-helloworld.web.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pascal-brand38.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-05-22T21:19:52.000Z","updated_at":"2024-05-27T16:23:38.000Z","dependencies_parsed_at":"2024-05-22T22:33:05.577Z","dependency_job_id":"8ee10ac1-31ab-4dcf-bcd1-6556c680ffcf","html_url":"https://github.com/pascal-brand38/firbase-react-helloworld","commit_stats":null,"previous_names":["pascal-brand38/firbase-react-helloworld"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascal-brand38%2Ffirbase-react-helloworld","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascal-brand38%2Ffirbase-react-helloworld/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascal-brand38%2Ffirbase-react-helloworld/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascal-brand38%2Ffirbase-react-helloworld/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pascal-brand38","download_url":"https://codeload.github.com/pascal-brand38/firbase-react-helloworld/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246969068,"owners_count":20862482,"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","firestore","react","vite"],"created_at":"2025-04-03T08:37:42.154Z","updated_at":"2025-12-30T23:10:03.898Z","avatar_url":"https://github.com/pascal-brand38.png","language":"JavaScript","readme":"Firebase + React + Vite Step by Step\n====================================\n\nThis is a step-by-step application using\n* [Firebase](https://firebase.google.com/) as the hosting: database,...\n* [React](https://react.dev/) for the web application library\n* [Vite](https://vitejs.dev/) to setup the application\n\n____________________________________________________________________\n\nReact + Vite Initialization\n---------------------------\n\nThis creates a basic application with [React](https://react.dev/).\n\nFirst, create github repo on github https://github.com/new.\nThe repo should be empty (no README, no .gitgnore,...), apart the license file as [Vite](https://vitejs.dev/) will replace existing files.\n\nThen locally\n\n```bash\n# Clone the repo locally\ngit clone git@github.com:pascal-brand38/firbase-react-helloworld.git\n\n# Install Vite if not already done\nnpm install --global vite\n\n# Create the application\n#   with project name being firbase-react-helloworld\n#   and choose \"Ignore files and continue\"\n#   and then use React framework, with javascript\nnpm create vite@latest\n\n# Once created, install it, and push onto gituhub\ncd firbase-react-helloworld\nnpm install\ngit add .\ngit commit -s -m 'vite + react'\ngit push\n\n# Run the app\n# and then open your web browser at http://localhost:5173\nnpm run dev\n```\n\n\n____________________________________________________________________\n\n[Firebase](https://firebase.google.com/) Create and Deploy\n----------------------------------------\n\nFirst, a firebase project must be created on https://firebase.google.com/\n\n```bash\nGo to console\n\n# Add a new project\n#   Name: firbase-react-helloworld\n#   Do not activate Google Analytics\nAdd a project\n\n# Prepare to link with your react application\n# by adding a web application\n#    pseudo: firbase-react-helloworld\n#    and  \"Configurer également Firebase Hosting pour cette application.\"\nAdd the application \"web\"\n```\n\nOnce done, run the following locally\n```bash\n# install firebase and firebase CLI\nnpm install firebase firebase-tools\n\n# Link your app with the Firebase project\nfirebase login\nfirebase init\n# and choose, with \u003cspace\u003e\n#      \"Hosting: Configure files for Firebase Hosting\n#       and (optionally) set up GitHub Action deploys\"\n# and then enter\n# then \"use an existing project\"\n# and choose \"firbase-react-helloworld\"\n# \t? What do you want to use as your public directory? dist\n# \t? Configure as a single-page app (rewrite all urls to /index.html)? No\n# \t? Set up automatic builds and deploys with GitHub? No\n\n# build the react app to create dist directory\nnpm run build\n\n# deploy on https://firbase-react-helloworld.web.app/\nfirebase deploy\n\n# save on git\ngit add .\ngit commit -s -m 'firebase'\ngit push\n```\n\n____________________________________________________________________\n\n[Firebase](https://firebase.google.com/) Use in the application\n----------------------------------------\n\nIn App.jsx, use the following:\n\n```js\nimport { initializeApp } from \"firebase/app\"\nconst [app, setApp] = useState(undefined)\n\nuseEffect(() =\u003e {\n  const init = async() =\u003e {\n    const firebaseConfig = {    // is found in the firebase application parameters\n      apiKey: \"AIzaSyAggx6E7Q6ttCUI2Lkexf6xz4VvtiPNUZc\",\n      authDomain: \"firbase-react-helloworld.firebaseapp.com\",\n      projectId: \"firbase-react-helloworld\",\n      storageBucket: \"firbase-react-helloworld.appspot.com\",\n      messagingSenderId: \"597188741887\",\n      appId: \"1:597188741887:web:fa6a8203246efeed77daca\"\n    };\n\n    // Initialize Firebase\n    const app = initializeApp(firebaseConfig);\n    setApp(app)\n  }\n\n  init()\n\n}, [])\n```\n\n\n____________________________________________________________________\n\nFirestore Database\n------------------\n\n### Database creation\nGo on https://firebase.google.com, then ```go to the console```, and then select the project (firbase-react-helloworld)\n\nThen click on ```Create / Firestore Database```, and then ```Create a database``` and ```Démarrer en mode test```\n\nThen ```Create a new collection```\n* called stats\n* with document id being count\n* with 1 field: count, a number initialized at 0\n\n### Database usage in the Application\n\nYou can refer at [Google documentation](https://firebase.google.com/docs/firestore/query-data/get-data?hl=fr).\n\n\n#### Use the Database\n\nIn App.jsx, use the following:\n\n```js\nimport { getFirestore } from \"firebase/firestore\"\nimport { doc, getDoc, setDoc } from \"firebase/firestore\"\n\nconst [db, setDb] = useState(undefined)\n\nuseEffect(() =\u003e {\n  const init = async() =\u003e {\n    const db = getFirestore(app);\n    setDb(db)\n\n\n    if (docSnap.exists()) {\n      console.log(\"Document data:\", docSnap.data());\n      setCount(docSnap.data().count)    // read the database\n    } else {\n      // docSnap.data() will be undefined in this case\n      console.log(\"No such document!\");\n    }\n  }\n\n  init()\n}, [])\n\n// Read a value from the database\nconst docRef = doc(db, \"stats\", \"count\");\nconst docSnap = await getDoc(docRef);\n\n// Write a value to the database\nsetDoc(docRef, { count: newCount }, { merge: true });\n```\n\n\nAuthentication\n--------------\n\nSeveral [authentication methods](https://firebase.google.com/docs/auth/where-to-start?authuser=0\u0026hl=fr) exist in Firebase, such as the [Authentication Email/Password](https://firebase.google.com/docs/auth/web/password-auth?authuser=0\u0026hl=fr).\n\nIn order to use email/password authentication, ```go to the console``` and\nyour project, then ```Create Authentication```, then ```Email/Password```, and finally ```Activate```.\n\nTo create a new user\n```js\nimport { getAuth, createUserWithEmailAndPassword } from \"firebase/auth\";\n\nconst auth = getAuth();\ncreateUserWithEmailAndPassword(auth, email, password)\n  .then((userCredential) =\u003e {\n    // Signed up\n    const user = userCredential.user;\n    // ...\n  })\n  .catch((error) =\u003e {\n    const errorCode = error.code;\n    const errorMessage = error.message;\n    // ..\n  });\n```\n\nTo connect\n```js\nimport { getAuth, signInWithEmailAndPassword } from \"firebase/auth\";\n\nconst auth = getAuth();\nsignInWithEmailAndPassword(auth, email, password)\n  .then((userCredential) =\u003e {\n    // Signed in\n    const user = userCredential.user;\n    // ...\n  })\n  .catch((error) =\u003e {\n    const errorCode = error.code;\n    const errorMessage = error.message;\n  });\n```\n\n\n\nStorage\n=======\n\nIn the Firebase console, create a Storage, a directory\n```Public``` in the storage, and finally upload a file there.\n\nIn the rules tab of the console, create the following rule to\nindicate that anything inside the public folder is read-only:\n```\nrules_version = '2';\n\nservice firebase.storage {\n  match /b/{bucket}/o {\n    match /public/{file} {\n      allow read;\n      allow write: if false;\n    }\n  }\n}\n```\n\nAnd finally configure the storage to be accessed whatever is the IP:\n```bash\npacman -S mingw-w64-x86_64-python-gsutil\npython -m pip install requests\n\ncat \u003c\u003c\u003c EOF \u003e\u003e\u003e cors.json\n[\n  {\n    \"origin\": [\"*\"],\n    \"method\": [\"GET\"],\n    \"maxAgeSeconds\": 3600\n  }\n]\nEOF\n\ngsutil cors set cors.json gs://firbase-react-helloworld.appspot.com\n```\n\nIn your application, use the following to get the url access of a file,\nto be run once the app initialization is performed:\n```js\nimport { getStorage, ref, getDownloadURL } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst imgRef = ref(storage, 'public/firebase-cloud-storage.png');\ngetDownloadURL(imgRef)\n  .then((url) =\u003e {\n    // Insert url into an \u003cimg\u003e tag to \"download\"\n    console.log('PASCAL url ', url)\n    setUrl(url)\n  })\n  .catch((error) =\u003e {\n    // check https://firebase.google.com/docs/storage/web/download-files?hl=fr\n    // and https://firebase.google.com/docs/storage/web/handle-errors\n    console.log(`STORAGE ERROR ${error}`)\n  })\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascal-brand38%2Ffirbase-react-helloworld","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpascal-brand38%2Ffirbase-react-helloworld","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascal-brand38%2Ffirbase-react-helloworld/lists"}