Getting Started with Firebase and Google cloud-run
Firebase is a production-grade web content hosting platform that makes it extremely easy to deploy both static and dynamic content web apps. Security is natively built into firebase and so this means your content would always be served in a secure manner. Firebase also makes it very easy to continuously develop, preview and deploy your web apps using simple commands.
Google Cloud Run is a fully managed serverless platform that runs docker containers allowing you to serve fully-fledged applications with multiple endpoints in a stateless manner.
In this tutorial, you will learn how to serve a loan decision system that predicts the loan eligibility of applicants based on their demographic information.
You will serve the application frontend with firebase hosting while connecting to a backend that will be served on google cloud run.
To follow along with this tutorial the source code can be found here. (Follow the readme documentation to create an env file for the backend application which is required for the backend to work correctly).
Application architecture
The client will be served on firebase hosting. A user simply fills a form and sends a request to the backend sitting on google cloud run. The API passes the data to a machine learning algorithm that then makes a prediction and sends a response back to the frontend stating if the user is eligible for the loan or not. The backend application is built with FastApi and serves a machine learning algorithm built with a scikit-learn random forest classifier.
Project structure
Our preferred IDE is VS Studio Code(VSCode). Fig 2.1 illustrates the project structure in the VSCode.
By default, Firebase hosting serves static files located in a public folder(Fig 2.2), and names other than the public can be used. Firebase hosting would look for an index.html file in the public folder and attempt to serve that file as the root file for your website but you can also configure a redirect. The public folder is what would live on firebase hosting.
The server folder holds the backend application and docker image used to deploy the backend service to google cloud build.
Deploying the system
To deploy the application, you would need to have Google Cloud (gcloud) CLI and the Firebase CLI installed on your system. The instructions to follow for installing gcloud can be found here and the instructions for Firebase CLI installation can be found here. The following specifies the deployment steps:
- Login into the firebase console and create a new project by clicking on add project.
2. Follow the prompt with default settings and click on continue till the project is created.
3. To be able to use cloud build APIs within your project in building and deploying your backend to cloud run, you need to use a paid plan. Cloud build has a free tier so it would cost nothing to follow this tutorial but you will be required to switch to a paid plan. More on cloud-run billing can be found here.
4. On the VSCode terminal window, log in with the gcloud CLI using the following command:
5. Change the directory into the server folder and set gcloud default project as your new project. To see your project ID, simply run the project list command
6. Set the default project to your project ID
7. Build a docker image of your backend application using cloud build
The service name can be the name of your project. For example, we call our app: smart-lendr. When running this command the prompt will request to enable some APIs, and respond with yes as the APIs would be required to run cloud build. In this case, the region is set to US central 1 in order to use cloud build.
8. Deploy your built docker image
When prompted to allow unauthenticated access, select yes. This is to allow the API to be publicly accessible. The docs endpoint is also shown in Fig. 4.
9. Having deployed the backend, you can now update the submitform.js file in the public/js folder with the correct prediction URL and also replace the token, with the token generated in your env file to enable requests to the newly deployed backend service.
10. Run the firebase init hosting command but can also just manually create the firebase.json and firebaserc files which is what the init hosting command does.
By creating this file we are telling Firebase that our public folder is named public. If we want to call it anything else, this is where you inform Firebase about the name you have given to the folder.
The redirects key allows you to specify an array of objects telling Firebase how to handle given source routes. Here since there is no index.html you are simply asking Firebase to always redirect a request to your root to Home.html.
The ignore key informs Firebase hosting of files to ignore while uploading your static files to its CDN.
The .firebaserc file is where you specify what Firebase project the hosting is linked to. Simply replace the angle brackets and their content with your project ID.
11. Run the deploy command:
This command uses your Firebase config set above to deploy your application frontend to Firebase hosting and provide a URL to access your application.
12. Launch!
If all steps were followed correctly, the home.html page should load using the URL provided by Firebase.
Conclusion
Leveraging technology like Firebase hosting makes it extremely easy to serve both static and dynamic content on Google at zero cost and with just a few commands allowing you to spend more time and put more effort into building your applications rather than worrying about hosting them.
Contributor:
If you find this article engaging
… and have an interest in developing scalable applications under our guidance, please feel free to contact us.
