Firebase
Firebase is an application development platform by Google and consists of a suite of products geared towards quick development and business growth. In this lab we shall deploy an application to firebase hosting.
Once you have a gmail account you can start creating a firebase project by clicking the following link.
Task 1
Click on add project.
Give it a name then enable google analytics as it is needed for this code lab.
In configuring google analytics you can select "create an account" from the dropdown. Enter a name, select United States and location then you only needed to accept the Google Analytics terms then click "Create Project"
After creation you will then be directed to the project dashboard.
From here we want to add a web application to the project by clicking on the "</>" icon.
Give the application a name then select "Also set up Firebase Hosting for this app"
Then keep clicking "Next" and finally "Continue to console"
Finally we have created a firebase project and added a web application.
For our code labs we recommend gitpod as a development environment because it allows us to get you directly into a workspace with all dependencies automatically included. To begin, ensure that you have a github account to login with then click the following link.
After logging in and loading up the workspace, the firebase-cli should already be installed. To login into the firebase cli, open up a new terminal from the toolbar.
Task 3
Execute the following command in the terminal.
firebase login --no-localhost
The --no-localhost flag is required as we are running this via the cloud in gitpod. Answer ‘y' if asked to collect CLI usage. Then ctrl + click the link given in the terminal.
The link would take you to a sign-in page. Sign in with the same google account used to create the project then click allow. It should then give a code which you will need to copy (ctrl +c) and paste into the gitpod terminal (ctrl + shift + v).
Press enter after pasting then you should be logged into the CLI.
Next you need to initialize the workspace as a firebase project then you would be able to deploy.
Task 4
Type and run the following command in the terminal.
firebase init
On the following menu use the down arrow key to highlight hosting and tap the spacebar to select it then press enter.
Then select "Use an existing project".
Then select the project you created on the firebase console.
Press enter for the remaining prompts.
Firebase should finally be initialized.
When you deploy an app to firebase hosting, the various firebase javascript libraries are also hosted on the same server. This means you can add SDKs via reserved Hosting URLs.
Task 6
We shall update index.html to add the following javascript files:
- firebase-app.js: main firebase sdk/library
- firebase-performance.js: sdk for performance monitoring
- init.js: automatically initializes firebase with your project's configuration
- first-input-delay.min.js : a javascript library which measures how long the app takes to load on the client
For the best measurement accuracy we should include first-input-delay.min.js in the head section of the page. Add the following line to index.html at the bottom of the head tag.
<script src="https://cdn.jsdelivr.net/npm/first-input-delay@0.1.3/src/first-input-delay.min.js"></script>
<!--- before </head> --> Then we add the remaining js files in the bottom of the body tag before main.js. We also add a snipped which initializes first-input-delay.min.js
index.html
<script src="/__/firebase/7.14.1/firebase-app.js"></script>
<script src="/__/firebase/7.14.1/firebase-performance.js"></script>
<script src="/__/firebase/init.js"></script>
<script>
//initialize firebase performance
const perf = firebase.performance();
// The perfMetrics object is created by the code that goes in <head>.
perfMetrics.onFirstInputDelay(function(delay, evt) {
ga('send', 'event', {
eventCategory: 'Perf Metrics',
eventAction: 'first-input-delay',
eventLabel: evt.type,
// Event values must be an integer.
eventValue: Math.round(delay),
// Exclude this event from bounce rate calculations.
nonInteraction: true,
});
});
</script>
<!--- before main.js in the body tag -->And that's all we need to do to monitor the performance of our app!
While working on your web app typically you would like to preview the application.
Task 5
Type an run the following command
firebase serve
Firebase would start a development server on port 5000.
Gitpod would detect something is running on the port. To view the site click "Make Public" then press "Open Preview"
You can then view your site running right in gitpod!
Next, we would like to deploy the application to firebase hosting. First ensure that all of your website's files are in the public folder (In this code lab it already is).
Task 6
Because the serve command is still running in the terminal it is said to be ‘non interactive'. You can open a new terminal or cancel the serve command by clicking in to the terminal and pressing "ctrl + c".
Now execute the following command.
firebase deploy
You would be given a link to view your deployed application. Follow the link (ctrl + click) to see your application hosted for free over https!
Go back to your project dashboard on the firebase console. Then navigate to Performance.
You should see that performance monitoring has been setup for your application! After some time you can view metrics as shown below.
And that's how you can deploy a project for free on firebase hosting!