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):
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.
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.