Javatpoint Logo
Javatpoint Logo

Firebase hosting

Firebase hosting

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.

Key capabilities

Capability Description
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?

Firebase Hosting is designed for the modern web developer. Apps and websites are more powerful than ever with the growth of front-end JavaScript frameworks such as Angular and static generator tools like Jekyll. Whether we are deploying a complex progressive web app (PWA) or a simple app landing page, hosting provides us with the infrastructure, tooling, and features to deploy and manage websites and apps.

Firebase hosting

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.

2) Firebase-CLI

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

3) Domain

This is the optional requirement. There are several domain name providers in the world. We can buy the domain from Godaddy.com.

Firebase hosting

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.

Firebase hosting

Once, we have a Firebase project, we have to perform the following steps:

Step 1:

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:

  1. Install Node.js using the nvm-windows. Installing Node.js automatically install the npm command tools.
  2. We can install the Firebase CLI through npm by running the following command on command prompt:

Firebase hosting

Step 2:

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.

Firebase hosting

When we select to allow access, we will switch to the browser to allow access to the Firebase CLI:

Firebase hosting

When we click on Allow, it shows the following window:

Firebase hosting
Firebase hosting

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:


Firebase hosting

Step 3:

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.


Firebase hosting

Write y and press enter to continue the process.

Firebase hosting

Select the Hosting feature and press space and then enter.

Firebase hosting

After that, select the Firebase project, i.e., Firebase-demo, in my case.

Firebase hosting

Give name, which we want to use as our public directory and press y for 'Configure as a single-page app'.

Firebase hosting

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:


Firebase hosting

Step 4:

In the next step, we will go to the Firebase console and go to Develop->Hosting. Here, we select Get started.

Firebase hosting

After that, we click on Next.

Firebase hosting

Again click on Next.

Firebase hosting

Give a nickname and click on register and continue.

Firebase hosting

And, finally, click on continue to console.

Firebase hosting

Step 5:

We can add a custom domain also so that we can easily access our web application. Click on Add custom domain.

Firebase hosting

Step 6:

In the next step, we will enter the domain and click on Continue.

Firebase hosting

Then, add the txt record and value into our domain provider DNS and click on Verify.

Firebase hosting
Firebase hosting

Add A records to our domain provider DNS.

Firebase hosting
Firebase hosting

This will take up to 5 minutes to 1 hour, depending on our domain provider to update the DNS record.






Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA