Deploy React Application On Firebase.

How To Deploy React Application On Firebase:-

Deploying a React project on Firebase is a great way to quickly get an application up and running on the web. Firebase provides a wide range of services for web and mobile applications and is especially well-suited for applications built with JavaScript frameworks such as React.

Using Firebase, developers can easily deploy a React project to the cloud and keep it running. Firebase provides a number of features to make deployment simple, including hosting, database, authentication, and storage services. These services also allow developers to quickly add features such as user accounts, user authentication, data storage, server-side logic, and analytics.

With Firebase, developers can use the Firebase CLI to quickly deploy their React project. By running the CLI command ‘firebase deploy’, developers can deploy their React project to the cloud, making it available to the world. This command will create a new Firebase project, set up the necessary files and services, and deploy the React project to the cloud.

Firebase also provides a web-based dashboard for developers to view and manage their applications. This dashboard allows developers to view the status of their deployment, manage the deployed services, and monitor the performance of their application.

Using Firebase to deploy a React project is a great way for developers to quickly get their applications up and running on the web. Firebase provides a wide range of services that make it easy to deploy and manage React applications. Firebase also provides a web-based dashboard for developers to view and manage their applications, making it easy to make changes and monitor performance.

Steps To Deploy React Application On Firebase:-

# First We need to Visit Firebase Website which is https://console.firebase.google.com/

 Then We Need To Write Our Project Name Which We Want To Host.

                               

1. Create a React project using create-react-app.

                                   

2. Install Firebase Tools using npm install -g firebase-tools.

                             

                                

3. Initialize your project with firebase init.

                                 

                                 

4. When prompted, select Hosting as your Firebase product.

                                   

                                

5. Select the project you created in the Firebase Console.

                                  

7. Configure your project with firebase.json and .firebaserc files.

                                   

8. Deploy your project using firebase deploy.

                                 

                                 

NOTE:- Check your project live on the URL provided by the Firebase console.

How to retrieve specific node from firebase database in android based on value

 Sometimes it is needed to retrieve the node based on a value, not the child.

Android+Firebase

you may get some solution like - to get all the nodes first and after that iterate it locally.

Explaining below - 

Let's assume the requirement is to retrieve all the node that has been mobile number = 9999999999.

Structure of the node - 

Firebase Node

The first approach (Not Recommended) - 

In this approach, you will get all the nodes and then you have to iterate to get the required record.

inline number 15-17 i'm iterating all the nodes and removing  the nodes from the list which has the different mobile number

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

private void readAllRequestedFormFromFirebaseDb(){ final FirebaseDatabase database = FirebaseDatabase.getInstance(); DatabaseReference ref = database.getReference("App_DB"); DatabaseReference childRef = ref.child("AllRequest"); childRef.addListenerForSingleValueEvent(new ValueEventListener() { @Override public void onDataChange(@NonNull DataSnapshot snapshot) { // getting list for(DataSnapshot dataSnapshot: snapshot.getChildren()){ QueryFormModel post = dataSnapshot.getValue(QueryFormModel.class); queryFormModelArrayList.add(post); } for(int i=0;i<queryFormModelArrayList.size();i++){ if(!queryFormModelArrayList.get(i).getMobileNumber().equalsIgnoreCase("9999999999")) queryFormModelArrayList.remove(i); } } @Override public void onCancelled(@NonNull DatabaseError databaseError) { Log.e("DetailsActivity", "onCancelled:readAllSubmittedRequestFromFirebaseDb: "+databaseError ); } }); }

   

Why this approach is not recommended -?

Just assume if you have 1000 records so in this case, you are getting all the nodes first and after that iterating all the nodes to get what exactly the requirement is.

so in short you are doing irrelevant effort and unnecessary extending the network call.

even though it's correct but it will put a question mark on your programming skills.

The second approach (Recommended) - 

In this approach instead of getting all the nodes, you will get only the nodes that have been the mobile number that you passed.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

private void readAllRequestedFormFromFirebaseDb(){ final FirebaseDatabase database = FirebaseDatabase.getInstance(); DatabaseReference ref = database.getReference("App_DB"); DatabaseReference childRef = ref.child("AllRequest"); Query queryRef = childRef.orderByChild("mobileNumber").equalTo("9999999999"); queryRef.addListenerForSingleValueEvent(new ValueEventListener() { @Override public void onDataChange(@NonNull DataSnapshot snapshot) { // getting list for(DataSnapshot dataSnapshot: snapshot.getChildren()){ QueryFormModel post = dataSnapshot.getValue(QueryFormModel.class); queryFormModelArrayList.add(post); /*the above list will have record only with the provided mobile number*/ } } @Override public void onCancelled(@NonNull DatabaseError databaseError) { Log.e("DetailsActivity", "onCancelled:readAllSubmittedRequestFromFirebaseDb: "+databaseError ); } }); }

   

That all about this post.👍👍👍

Happy Coding.😍

**********************************************

*************************************************

****************************************************