How to create an MVP with Firebase and React

Share

Pedro Miranda

Pedro Miranda
Fullstack Developer

INSCALE Article - How to create an MVP with Firebase and React

Creating a full fledge web app and publishing it to the public can be a very hard task, you will invest plenty of your time and/or your money depending in the context. Is it a personal object? Are you creating a new service or product?

The Lean Startup methodology tells us that it is safest to create a Minimum Viable Product (MVP) and test it first.

What is Firebase and why use it?
Firebase is a Backend as a Service (BaaS) own by Google, it has Hosting, Realtime Database, A/B Testing, etc; in summary, it is packed with functionality. You should use Firebase’s Spark plan which is totally free and has access to most of the services. We are going to use Firebase with React. For this, consider using the Hosting service to host our Single Page Application (SPA) and the Realtime Database to store our content.

Pre-requisites
As pre-requisites I have created a React app and a Google account.

Building the project
Go to the Firebase website and create a Firebase project, after that, return to your React app and terminal.
First, check the basepath of the React app for the Router to work correctly (however, if you do have domain this is not necessary):

MVP with Firebase and React - Article 3 Image1 - 1

Build the project:

$ npm run build

Deploy to Firebase

In order to deploy to Firebase, we need to install a tool:

$ npm install -g firebase-tools

Sign in to Google:

$ firebase login

Initiate your project:

$ firebase init

You will be asked which features you want to use, select hosting; next, select the Firebase project. You’ll also be asked which public directory you want to use, you should select the build directory. Finally, select it to use SPA and say “no” to any overwrite options that it may ask you.

Finally, deploy your build files to Firebase:

$ firebase deploy

Adding the Realtime Database

Now that you have your app online, you can hook it to a database.

Go to the Firebase console (website), select Database, you will immediately see the API endpoint to your project, which will accept our HTTP requests.

MVP with Firebase and React - Article 3 Image2 - 2

Note: For a production environment you need to add authentication.
Install Axios:
$ npm install –save axios
Create an Axios instance by creating a axios-instance.js file with the following code:
$ npm install –save axios import axios from ‘axios’;
const instance = axios.create({
baseURL: ‘https://name-of-project.firebaseio.com/’;
});
export default instance;

Now that you have your Axios instance connected to Firebase, import it in your React component and start doing Posts and Gets from the Firebase Realtime Database, like this:
exampleGetFromFirebaseDBHandler = () => {
axios.get(‘/items.json’);
}
This method will send a Get request to Firebase to get all the rows from the items’ table.

That’s it! Firebase lets you host your app and your data for free and it’s perfect for a small MVP.