Pedro Miranda

Fullstack Developer

Pedro Miranda

Fullstack Developer

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):
<BrowserRouter basename=”/react-app-name/”>

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.

Cookies make our website work properly and better for you

We use cookies to improve your experience on our website.

By continuing to browse this site, you agree to the use of cookies.

Visit our Cookies Policy to learn more.

I accept cookies
I decline cookies