React + Firebase setup.

Building a full stack application with a good looking front end and a robust back end is not an easy job. It can get overwhelming pretty quickly for not only junior developers but also for someone who’s just trying to get started with web development in general. I’m writing this article to make the very first step(and in my opinion the most crucial one) easier for those who’re confused on how to get started. I’ll try to make it as simple as possible for anyone who’s not familiar with either React or Firebase. I’ll also be adding references if you feel you need any additional information related to the topic. Let’s get started.

Setting up your React project

Folks at Facebook have made it pretty easy for everyone to get a React project set up in just a few minutes. Follow these steps and you’re good to go.

1. Download and install node specific to your operating system from this link.
2. Open terminal/your code editor and type the following code

npx create-react-app "YOUR_PROJECT_NAME"

This will create a basic react application with some boilerplate code for you.You can test the application by typing the following command

cd "YOUR_PROJECT_NAME"    //Takes you to your project directory.
npm start                 //Runs your application on a local server.

Once tested, go back to your terminal/code editor and install the firebase package with the following command.

npm i firebase

And that’s pretty much it. That’s all you need to get your front-end up and running. Now let’s look into firebase for your backend.

Firebase basics

Firebase is this amazing service provided by Google that can be used to build web or mobile applications. It let’s you build your applications without the need of actually writing backend APIs or going through the burden of maintaining a database. It does all of that and a lot more in just a few steps. Now, there’s a lot that Firebase does and I’ll probably cover those features in follow up articles. For now we’ll focus on setting up our project with the 3 primary services that are part of almost every application out there, you guessed it

1. Authentication (Sign In/ Register)
2. Cloud Firestore (Real time Database)
3. Cloud Storage (Asset storage for files, typically images, audio, video or any other document)

To know more about the services provided by Firebase, you can refer to https://firebase.google.com/products .

Now, here’s the good part. You don’t have to individually setup these 3 services separately. Firebase setup is done once, for every project which then provides you with different services for that project. It’s not as complex as it sounds. Follow these steps and you’ll get there.

Step 1. Create a firebase account.

Simple enough. → https://firebase.google.com/

Step 2. Create your firebase project.

Once you’ve created an account and logged in, you’ll see a console option on the top right of your screen. Click on that button or just follow this link to get to your projects page. On your projects page, click on “Create a project”.

Project page for your firebase account

It’ll prompt you to add your project name. Do exactly that and click on “Continue”. It’ll ask you if you want Google Analytics for your application. It’ll help you visualize user activity and user interaction with the application that you’ll be deploying in the later stages of your project. You can enable or disable it according to your needs, completely up to you. Once you’re done with that click on “Continue”.

Sidenote : Firebase has a free plan with usage limitations and you can switch to the paid version which is basically “Pay for what you use” type of a service. For beginners the free plan(Spark) is more than enough to test it’s services and to build applications with small amounts of data. Click here to learn more about the pricing.

You now have a firebase project!

You’ll be redirected to your console now where all the services that firebase provides for this project will be available. It’ll look something like this.

Your firebase console

Step 3: Create an app inside the project.

Once you’ve created a project, you will now create an app associated with that project. It’s as easy as creating a project. Click on the gear icon on top left of the page right next to “Project Overview” and select “Project Settings”. You’ll be redirected to your project settings page with all kinds of information related to your project. In the “General” tab scroll down and you’ll find all your apps from the project. If you haven’t created any you’ll see something like this

No apps

Select the “</>” option which basically means a web app. Firebase will ask for a name for your app. You can also set up firebase hosting for the same application which will help you in your deployment stages but it can be done later so we’ll keep it unchecked for now. Click on “Continue” to proceed. As soon as the app gets created, you’ll find a script generated under the name “Firebase SDK”. Something like this

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="<https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js>"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     <https://firebase.google.com/docs/web/setup#available-libraries> -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "AUTH_DOMAIN",
    databaseURL: "DATABASE_URL",
    projectId: "ID",
    storageBucket: "STORAGE",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Final Step : Copy keys to your front end

The script file that you get is what binds your front-end with the application that you just created in firebase, and binding them is super easy.

• Create a file called “firebase.js” in your React application’s src folder.
• In that file copy the code inside the <script></script> tag.

Your firebase.js file should look something like this.

The 3 export statements that you see below are the main firebase services for authentication, cloud firestore and cloud storage respectively. These three firebase elements can then be imported and used from any part of your project folder structure.

And that’s it!

You now have a React application set up with basic firebase’ basic backend services. I’ll be making a follow up post on how to use these services inside the application which in my opinion is easier than the setup.

Cheers!