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

  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

  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.

Step 2. Create your firebase 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!

Your firebase console

Step 3: Create an app inside the project.

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

  • 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!

Cheers!

I handle web. Yes, the whole internet.