Tag - Firebase

Setup Firebase account with React App
Frontend-Technology
Setup Firebase account with React App
Krusha Shah
Feb 23, 2024

Establishing your account on Firebase and connecting it with your React APP encompasses multiple steps, such as initiating a Firebase project, adjusting your project settings, and acquiring your Firebase configuration details. Below is a comprehensive, step-by-step guide:    Step 1: Go to the Firebase Console  From this link, you can go to the Firebase console app  https://console.firebase.google.com/    Step 2: Sign in or create a Google Account  If you have a Google account you can directly sign in and  if you don’t have then you need to create one to sign in    Step 3: Create a new Firebase Project  Click on the Create a Project button.       Enter a Project name.          And Click on the Continue button.  Enable Google Analytics (Optional)          From here you can enable or disable the Google Analytics option. It is recommended to enable Google Analytics for better insights.  Once you click on the Continue button, firebase will set your project and redirect you to the Project dashboard.           Add an app to your project:  Click on the Project Settings button and from there you can see the configuration of your project.           Choose the platform for your app (iOS, Android, or Web).                 Enter an app nickname (optional) and click on Register app.          Obtain Firebase configuration details.    For a web app, Firebase will provide you with a configuration object containing keys like apiKey, authDomain, projectId, etc. Copy this information as you'll need it in your application.  Step 4: Create database  For Creating the database, go to the build option and click on the “FireStore Database” option     Once you navigate to Firestore Database, click on “Create database” button.    Step 5: Install the Firebase Package  After creating your React app, change directory to your project's root folder and install the Firebase package by running:  npm install firebase    Step 6: Initialize Firebase in your React APP  Create a new folder inside your project src directory. You can call this firebase_setup. Next, create a firebase.js file inside that folder. Then paste the code generated earlier into this file. Thus, you can fine-tune the generated code as follows: import { initializeApp } from "firebase/app";  import { getFirestore } from "@firebase/firestore"    const firebaseConfig = {  apiKey: process.env.REACT_APP_apiKey,  authDomain: process.env.REACT_APP_authDomain,  projectId: process.env.REACT_APP_projectId,  storageBucket: process.env.REACT_APP_storageBucket,  messagingSenderId: process.env.REACT_APP_messagingSenderId,  appId: process.env.REACT_APP_appId,  measurementId: process.env.REACT_APP_measurementId  };    const app = initializeApp(firebaseConfig);  export const firestore = getFirestore(app)    Step 7: Test Your Firebase Connection  You can test the connection by submitting dummy data to Firestore. Start by creating a handles folder inside your project's src directory. Create a submit handler inside this file. You can call this handlesubmit.js, for instance:  import { doc, setDoc } from "@firebase/firestore"  import { firestore } from "../firebase_setup/firebase"  const handleSubmit = async(testdata) => {  const handleSubmit = async(employeeData) => { try { const employeeDocRef = doc(firestore, 'EmployeeDb', 'Employee_tbl'); await setDoc(employeeDocRef, employeeData); console.log("Added employee data successfully"); } catch(e) { console.error("Error adding data employee", e); } } export default handleSubmit  //Then inside App.js:  import './App.css';  import handleSubmit from "./handler/handlesubmit.js"; import { useState} from 'react';  function App() {  const [employee, setEmployee] = useState({ name: "", age: "", position: "", }); // Function to handle input changes const handleChange = (e) => { const { name, value } = e.target; setEmployee({ ...employee, [name]: value }); }; const submithandler = (e) => { e.preventDefault(); handleSubmit(employee); };   return ( <> <div className="form-container" onSubmit={submithandler}> <form action="#" > <div className="form-group"> <label >Employee Data:</label> <input type="text" name="name" placeholder="Name" value={employee.name} onChange={handleChange} /> <input type="text" name="age" placeholder="Age" value={employee.age} onChange={handleChange} /> <input type="text" name="position" placeholder="Position" value={employee.position} onChange={handleChange} /> <input type="submit" value="Submit" /> </div> </form> </div> </> ); }    export default App;    Run your React app and try submitting data via the form. Refresh the Firebase database console to see the submitted information in your collection.  When you run your React app it will look like this. Here when you add all the details of the employee and click on the Submit button Whatever you entered in the form it will be reflected in your Firestore database. Fantastic! You have effectively established your Firebase account and configured it in your react application.  

Read More
magnusminds website loader