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. Open terminal/your code editor and type the following code
npx create-react-app "YOUR_PROJECT_NAME"
cd "YOUR_PROJECT_NAME"    //Takes you to your project directory.
npm start //Runs your application on a local server.
npm i firebase

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. Cloud Firestore (Real time Database)
  2. Cloud Storage (Asset storage for files, typically images, audio, video or any other document)

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

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

  • In that file copy the code inside the <script></script> tag.

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.

I handle web. Yes, the whole internet.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store