Firebase Tutorial episode #1
Bene Studio Serverless Workshop - Calorie Counter App
Serverless architectures are application designs that incorporate third-party “Backend as a Service” (BaaS) services, and/or that include custom code run in managed, ephemeral containers on a “Functions as a Service” (FaaS) platform. 
Based on our experience when building MVPs or realtime apps, Firebase is a really good choice both for database and backend. With Firebase Functions there is no need to configure any servers and Cloud Firestore can be a good candidate for realtime apps.
Simple Calorie Counter Backend
Create a Firebase Functions Project
If you get stuck, check https://firebase.google.com/docs/functions/get-started
First, you should install Firebase CLI tools:
npm install -g firebase-tools
Next step is to log in to your Firebase account:
firebase init functions
Select a default Firebase project for this directory: [create a new project]
Do you want to use ESLint to catch probable bugs and enforce style? Yes
Do you want to install dependencies with
✔ Firebase initialization complete!
You may have noticed that you have to create the project manually at Firebase’s web console.
Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then
run firebase use –add
Don’t forget to add your newly created project:
run firebase use –add
Which project do you want to add? calory counter-1a1a1a
What alias do you want to use for this project? (e.g. staging) staging
Now you can define backend endpoints, insert data to the DB and query data from it.
Let’s create an endpoint that inserts new calories-food pairs. Check the comments.
Now let’s create an endpoint that lists all calories-food pairs. See comments.
Finally, you can deploy your newly created functions to Firebase Functions in a few seconds.
npm install –save redux-saga
firebase deploy –only functions:addMessage
Try It Out
Go to Firebase Web Console https://console.firebase.google.com/
Select your project.
Select Functions from the left-hand side menu.
Now you should see URLs to your functions on the Functions dashboard.
Create a new food-calories pair simply calling your function with the given URL even from the browser:
You should see a response like this:
Now list all items like this:
Now you should see all the items present in the calories collection in the DB.
Check the DB as well:
Select your project.
Select Database from the left-hand side menu.
Select Cloud Firestore from the drop-down in the title.
Now you can query and manage your data.
Why is Serverless Good?
Serverless architectures may benefit from significantly reduced operational cost, complexity, and engineering lead time, at a cost of increased reliance on vendor dependencies and comparatively immature supporting services. 
Frontend for a Firebase Application
With firebase on
For an easy start, firstly you may clone our repository at here: https://github.com/benestudio/serverless-firebase-fe-tutorial
After you cloned it, you can install the dependencies with npm or yarn. We assume you have already a working firebase account with prepared firestore and cloud functions.
I think the main question here, how can you communicate with cloud functions and the firestore?
Initialize firebase client
At firebase developer console, you can find in the project overview page, a
For better security, you may want to hide these configurations before you upload to a public repository. For this, we create a firebase.config.js file.
1. Create a new file in <project-root>/src, named firebase.config.js
2. Put the config object value to it from firebase developer console:
Calling cloud functions
In code level, we will use
We have to deal with two different env development and production. In production, we will use the right firebase configurations to rewrite the
The target property is your cloud functions base URL, like https://YOUR-URL.cloudfunctions.net/, so basically is the same base URL that you already familiar with from calories firebase lecture. The other part of the configuration is basically part of the
Hosting and deployment
We assume you already installed the firebase
1. The public folder in our case is the build folder
2. You have to deny the overwrite of index.html
After you initialized the hosting, you will have two files in the root, a .firebaserc file and a firebase.json. You have to modify the firebase.json.
As I mentioned before, you have to deal with production api calling. But the hardest part is to rely on firebase architecture. You have to just config the right rewrites:
Under the hosting section, you have to add these configurations. The ** is for our single page app, and the first is our
Run in dev mode
After you configured everything as well, you can start the application in the terminal, just simply call the yarn start or npm start command. The application will start for you under 3000 port by default.
Build and deploy
When everything is ready, you can give the yarn build or npm run build commands. After, you can call firebase
This article is written by bene : studio team, the React and React Native specialists. We are a software development consulting company Budapest, delivering superb digital services.
JOIN OUR TEAM OF HIGHLY SKILLED ENGINEERS WHO ALL PASSED THE FAMOUSLY CHALLENGING BENE : STUDIO ASSESSMENT!
Register to our next workshop!
Subscribe to our newsletter, and we will provide you more practical tips regarding mobile development:
In this blog post, we are checking back to our 25. September Redux Saga Workshop. If you have ever used Redux, then you know how cumbersome it can be sometimes to come up with the perfect flow of actions. But there is this wonderful thing, called Redux-Saga, and it makes your coding life so much easier.
Bene studio HQ
Andrássy út 66., 1062 Budapest
+36 70 682 9425