According to the 2022 Stack Overflow survey, 21.14 percent of developers use Firebase, making it the fourth most popular cloud platform. It's an evolving technology for integrating the backend seamlessly.
With Firebase, you can develop a full-stack application without writing a single line of backend code. Learn how to connect your React.js application with Firebase today and build on the go.
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
Add Your React App to a Firebase Project
The next step is to create a Firebase project and link it with your React app. Go to the Firebase console:
-
Click Add project to start a new Firebase project.
-
Enter a project name, then click Continue.
- Click Continue on the next page.
- Select your Firebase account from the dropdown or click Create a new account if you don't already have one.
-
Finally, click Create project.
- Click Continue once the process completes.
-
Next, click the Web icon (</>) towards the top-left of the following page to set up Firebase for the web.
-
Enter a nickname for your app in the provided field. Then click Register app.
- Copy the generated code and keep it for the following step (discussed in the following section).
- Click Continue to the console.
-
There are many options on the following page. Scroll down and select Cloud Firestore since you only need to set up a database in this case.
-
Next, click Create database.
- Click Next. Select your preferred Firestore location from the dropdown.
-
Then click Enable to create a Firestore database.
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.
For now, you can store the configuration object (firebaseConfig) inside a .env file. But consider using a more secure way to mask React secrets in production. Data that you store in a .env file can easily leak in your app build.
If using the .env option, append "REACT_APP" to each variable name inside .env. Otherwise, your app won't read the strings. Additionally, restart your React server each time you alter the detail in the .env file.
For example, to enter your app's Firebase secret key in the .env file:
REACT_APP_apiKey = yourFirebaseAccessKey
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)
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 { addDoc, collection } from "@firebase/firestore"
import { firestore } from "../firebase_setup/firebase"
const handleSubmit = (testdata) => {
const ref = collection(firestore, "test_data") // Firebase creates this automatically
let data = {
testData: testdata
}
try {
addDoc(ref, data)
} catch(err) {
console.log(err)
}
}
export default handleSubmit
Then inside App.js:
import './App.css';
import handleSubmit from './handles/handlesubmit';
import { useRef } from 'react';
function App() {
const dataRef = useRef()
const submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.current.value)
dataRef.current.value = ""
}
return (
<div className="App">
<form onSubmit={submithandler}>
<input type= "text" ref={dataRef} />
<button type = "submit">Save</button>
</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. With the basics in place, you can explore many other things Firebase can do to see how best to use it.
Build on the Go With Firebase and React
Firebase is a versatile backend-as-a-service solution that allows you to scale your app effectively. Once you connect your React app, you can leverage its many features to build your website to your liking.
For instance, the Firebase authentication toolkit is one of the features you might want to explore.