Search for a command to run...
A short guide on connecting Firebase with your React application
I am a developer from India with a good eye for frontend logic and design. I am also well acquainted with the backend and business logic so that's add to my ability to create a good frontend while making it easily integratable with backend.
No comments yet. Be the first to comment.
Understanding and Reading the MNIST Dataset
In the digital age, where data breaches are as common as coffee spills, one cryptographic algorithm stands out for its robustness in securing our passwords: bcrypt. Let's dive into the world of bcrypt hashing, uncovering its mechanics, the role of sa...
In our daily used language, we use Grammar, similarly, in computer language, we have a set of rules called grammar on which a language is defined. In this article, we will look into what those Grammars are and how we define and use them. Exploring th...
Introduction In the vast landscape of computer science, languages are not just confined to human communication; they also extend into the realm of formal languages, classified into regular and non-regular categories. Understanding these languages is ...
Hello Guys, welcome back to my blog. Today we will be creating our small server and React app to learn about Server-Sent Events and how to handle them in a React App. But before we even start building anything let's learn about Server-Side Events (SS...
In this article, we will learn how to create a new Reactjs app and integrate Firebase in our React application.
Firebase is Google’s mobile application development platform that helps you build, improve, and grow your app.
Firebase is a toolset to “build, improve, and grow your app”, and the tools it gives you cover a large portion of the services that developers would normally have to build themselves, but don’t really want to build, because they’d rather be focusing on the app experience itself. This includes things like analytics, authentication, databases, configuration, file storage, push messaging, and the list goes on. The services are hosted in the cloud and scale with little to no effort on the part of the developer.
now that we have a little gist of Firebase let's set up our application now.
In this tutorial, we will be using Create-react-app. If you are new to React, here is an article about how to set up the React Application in your local.
once you have followed the above article for setting up the React-App we will now move to our next part where we set up the Firebase for our application.
Once the above process is done now let's set up the Firebase for our App.
Click on get started and add a project to it.
Click on the </> icon that will initiate a web app in the firebase.
once done you are done with the firebase console setting let's install the firebase package in our local.
Now we are done with the firebase side now all we need to set up everything in our local Application.
npm install firebase
.env.local file, where we put all our environment variables.REACT_APP_FIREBASE_API_KEY = "YOUR-UNIQUE-CREDENTIALS"
REACT_APP_FIREBASE_AUTH_DOMAIN = "YOUR-PROJECT-NAME.firebaseapp.com"
REACT_APP_FIREBASE_PROJECT_ID = "YOUR-PROJECT-FIREBASE-PROJECT-ID"
REACT_APP_FIREBASE_STORAGE_BUCKET = "YOUR-PROJECT-NAME.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "YOUR-PROJECT-SENDER-ID"
REACT_APP_FIREBASE_APP_ID = "YOUR-PROJECT-APP-ID"
REACT_APP_MEASUREMENT_ID = "YOUR-MEASUREMENT-ID"
Save the file and restart the server.
.evn.local file we need to initiate the firebase in our application
for that, we will create a new folder name firebase and then also create a new file and name it firebase.js
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const clientCredentials = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};
// Initialize Firebase
export const app = initializeApp(clientCredentials);
//
All you need is to import them from firebase.
we learned to create a new React application using create-react-app and also how to initiate firebase in our React application. We also learned how not to expose the firebase environment keys by using .evn files.
In the next article, we will learn about creating an Authentication application using firebase auth and react's popular framework NEXTJS.
If you liked my work considering the following and liking this article, it keeps me motivated and in case you want to connect to me feel free to email me at ashish.1999vns@gmail.com or connecting me on Twitter.
also if you wanna support me please consider buying me coffee.