Firebase Hosting allows fast and secure hosting for our web application, static and dynamic content, and microservices. It is production-grade web content hosting for the developers. We can easily and quickly deploy web apps and serve both static and dynamic content to a global content delivery network with only a single command. We can pair Firebase Hosting with Cloud Function or Cloud Run for building and hosting microservices on Firebase.
Firebase Hosting provides files with the help of fast CDN.
|Capable of serving content over a secure connection||The modern web is secure. The content is always delivered securely because zero-configuration SSL is built into Firebase Hosting.|
|It hosts static and dynamic content and microservices||It supports all kinds of content for hosting, from our CSS and HTML files to our Express.js microservices or APIs.|
|Quickly deliver content||Each file which we upload is cached on SSDs at CDN edges around the world. No matter where our users are, the content is delivered very fast.|
|Deploying new versions with one command||Using the Firebase CLI, we can get our app up and running in seconds. Command-line tools make it easy to add deployment targets into our build process.|
|Rollback with only one click||Although quick deployments are good, being able to undo mistakes is even better. Firebase Hosting provides full release management and versioning with one-click rollbacks.|
How does it work?
Using the Firebase CLI, we can deploy files from the local directory on our computer to our hosting server. Beyond serving static content, we can use cloud runs or cloud functions to serve dynamic content to our content and host Microsoft on our sites. All content is delivered over an SSL connection from the closest edge server on the global CDN. Hosting in Firebase has lightweight hosting configuration options for us to build sophisticated PWAs. We can easily set up custom headers or rewrite URLs for client-side routing.
For serving our content, Firebase offers several domain and subdomain options:
- By default, all Firebase projects have free subdomains on the firebaseapp.com and web.app domains. Both serve the same deployed content and configuration.
- We can create multiple sites if we have related apps and sites which serve different content but still share the same Firebase project resources (for example, if we have an admin panel, blog, and public app).
- We can connect our own domain name to a Firebase-hosted site.
Firebase automatically provisions SSL certificates for all our domains so that all our content is served securely
Why Firebase Hosting?
At present, most of the web hosting charges us, and the available free hosting services are slow. We also have to pay extra money to get an SSL certificate to convert our website to a secure one with https.
Firebase Hosting is free, and it would not cost us any more. Firebase Hosting, by default, provides an SSL certificate and offers an impressive speed across several geographical locations without any requirement for a separate CDN on top.
There are the following requirements for using Firebase Hosting:
1) Google Account
In the present era, everyone has a Google/Gmail account. The Gmail account is enough to use it. If we don’t have, then create one.
For installing Firebase-CLI, it is required that we have Node.js in our machine. So, first we will install Node.js in our machine, and once we have installed NodeJs, we will install the Firebase CLI using npm(Node Package Manager) by running the following command
This is the optional requirement. There are several domain name providers in the world. We can buy the domain from Godaddy.com.
Before working with Firebase Hosting, we first install the NodeJs from the following link: https://nodejs.or. g/en/download/.
Setup and Configuration
Before setting up Firebase Hosting, we need to create a Firebase project in Firebase console.
Once, we have a Firebase project, we have to perform the following steps:
In the first step, we have to install the Firebase CLI. Firebase CLI provides a set of tools for managing, viewing, and deploying to Firebase projects. To install the Firebase CLI, there are two options:
- Install Node.js using the nvm-windows. Installing Node.js automatically install the npm command tools.
- We can install the Firebase CLI through npm by running the following command on command prompt:
In the next step, we will sign in and test the Firebase CLI. After installing the CLI, we must authenticate it. After that, we can confirm authentication by listing our Firebase projects.
1) We run the following command to sign into the Firebase using our Google account.
The above command connects our local machine to Firebase and grants access to our Firebase projects.
When we select to allow access, we will switch to the browser to allow access to the Firebase CLI:
When we click on Allow, it shows the following window:
2) Now, we test the CLI is properly working or not and accessing our account. This is done by listing our Firebase projects with the help of the following command:
Many common tasks, such as deploying a Firebase project, require a project directory. We set up the project directory using the Firebase init command. The project directory is usually the same directory as our source control root. After running Firebase Init, the directory contains the Firebase.json configuration file.
Write y and press enter to continue the process.
Select the Hosting feature and press space and then enter.
After that, select the Firebase project, i.e., Firebase-demo, in my case.
Give name, which we want to use as our public directory and press y for ‘Configure as a single-page app’.
Firebase initialization complete.
The firebase.json file with default settings is created during initialization. If we select Firebase Hosting, Cloud Functions, and, Cloud Firestore, for Firebase during initialization, the firebase.json file will be as followed:
In the next step, we will go to the Firebase console and go to Develop->Hosting. Here, we select Get started.
After that, we click on Next.
Again click on Next.
Give a nickname and click on register and continue.
And, finally, click on continue to console.
We can add a custom domain also so that we can easily access our web application. Click on Add custom domain.
In the next step, we will enter the domain and click on Continue.
Then, add the txt record and value into our domain provider DNS and click on Verify.
Add A records to our domain provider DNS.
This will take up to 5 minutes to 1 hour, depending on our domain provider to update the DNS record.