Hosting Web Applications with Firebase

Hosting a Web App - Under the Hood

Firebase web hosting is much more popular compared to all other hosting providers. The popularity of front-end JavaScript frameworks like Angular and static generation programs like Jekyll has given websites more power than before. Hosting provides you with the infrastructure, functionality, and tools necessary to create and manage websites and apps, regardless of whether you're creating a straightforward website landing page or a sophisticated Progressive Web App (PWA).

Using the Firebase CLI, you can upload files to Firebase’s hosting servers from local directories on your computer. In addition to serving static content, you can host microservices on your sites using Cloud Functions for Firebase or Cloud Run. From the nearest edge server on Firebase’s global CDN, all content is delivered via an SSL connection.

Before going live, you can inspect and test your modifications. Using the Firebase Local Emulator Suite, your app and backend resources can be emulated at a locally hosted URL. Additionally, you can set up a GitHub integration for simple development iterations and share your changes at a temporary preview URL.

You can create complex PWAs using the lightweight hosting configuration options offered by Firebase web hosting. Now let's understand how can we host web applications with Firebase. Now let us understand the steps to host our web applications with Firebase.

Steps for Hosting Web Application with Firebase

You can deploy your web application quickly and easily using Firebase Hosting, one of the many services it offers. Here, we'll walk you through the process of deploying a straightforward static HTML application to Firebase.

Creating a Firebase Project

Here are the steps to create a project:

Step 1: Go to Firebase Console and Add a Project.

Step 2: Write a name for your project.

You can enter any suitable name for your project. For example, we are making a project codingninjasWebsite.

Step 3: Enable google analytics for your project.

Step 4: You need to configure google analytics for your project. You can choose default account.

Step 5: Click on create project button. Then you will see a new window.

After Project Creation

Step 6: After project creation, you need to choose the type of project.

Select web, because we are considering an example of the website.

Step 7: You need to register your application.

And also select the Firebase hosting after filling nickname of your project.

Step 8: Now click on the add Firebase SDK and these scripts to your application.

Step 9: If you haven't installed Firebase CLI on your local machine then you can install it by the following command:

npm install -g firebase-tools

Now after installation.

Step 10: You need to connect your local machine to the Firebase server by logging in. So you need to type the following command on the terminal in your project’s root folder.

firebase login

After logging in you will be redirected to this page. It means you are logged in to Firebase CLI.

Step 11: Then, you need to initialize the project by typing a command in the terminal.

firebase init

Now type “y” to proceed further.

Step 12: Next, you will see many options. From those options, you can choose any Firebase feature. So we are going to choose to host.

Step 13: We have already created a project in the above steps, so we need to use an existing Firebase project i.e. codingninjasWebsite.

Step 14: You need to choose a public directory to access it directly, configure it as a single-page application, set up automatic builds, and mark them as “yes.”

Then you will be redirected to the logging page of GitHub. You just need to log in yourself. After successful login on Github you will this page.

Step 15: Enter the Github user name and repository name to fetch the project directly from GitHub. Then you will see the Firebase initialization status as completed. 

Step 16: Now, type the following command to deploy the application.

firebase deploy

Now copy the hosting URL and check the output.

Test, Change, and Deploy a Web App with Firebase

You should inspect and test your changes before deploying to your live site. You can interact with simulated backend project resources through Firebase Hosting and view and test changes locally. Hosting can generate temporary preview URLs for your site that are shareable so that your team members can view and test your changes. To deploy from a pull request, Firebase even supports a GitHub integration.

Important Steps to Remember

You just need to keep in mind 

• Install or upgrade to the newest Firebase CLI version.
• Connect the local project directory of your Firebase project to the directory that has the content of your app.

Firebase Web Hosting through GitHub with GitHub Integration

Here are the steps for hosting through Github:

1. Create a GitHub repository (public or private) or you can also use the existing repository. You should have admin rights for the repository.
2. Using the firebase init command you need to set up the Firebase web hosting in the local version of the repository.

• Run this version of the command from the root of your local directory if you haven't already configured hosting:

firebase init hosting

• The GitHub Action component of Hosting only needs to be configured if Hosting has already been set up. Run this command version from the local directory's root:

firebase init hosting:github

3. The command will automatically take care of configuring the GitHub Action as long as you follow the CLI prompts.

• Gives your Firebase project a service account with the ability to deploy to Firebase web hosting.
• Encrypts the JSON key for that service account and uploads it as a GitHub secret to the specified GitHub repository.
• GitHub workflow YAML configuration files are created, referencing the newly created secret. These files set up the deployment to Firebase web hosting for the GitHub Action.

4. Make a new branch in GitHub and commit the workflow YAML files generated by the CLI.

5. In your GitHub repository, publish the branch.

6. Now, Merge all the branches.
 

Check out this problem - Smallest Distinct Window.

Frequently Asked Questions

Is it possible to host using Firebase?

Static and dynamic material, as well as microservices, are all hosted quickly and securely using Firebase Hosting.

What do you mean by Firebase hosting?

Microservices and static and dynamic content can both be hosted using Firebase Hosting, which is a fully managed service. SSD storage and a global CDN serve as the service's pillars (content delivery network). Content is always transmitted securely since Firebase Hosting has zero-configuration SSL built in.

What size is Firebase in GB?

Storage for your hosting content is free of charge for the first 10 GB. If you do not have the Blaze plan and your free Hosting storage reaches the 10 GB cap, you will not be able to add new content to your websites.

Will Firebase be sufficient for the backend?

With Firebase, you can get the best infrastructure for your web projects, handling everything from user authentication and server scaling to crash analytics and a dependable testing environment. Firebase is a fully managed backend service. Just leave it alone.

Conclusion

In this article, we have discussed hosting web applications with Firebase. We discussed hosting and how we can host our web applications with Firebase. To read our other articles on Firebase, you can check out below mentioned articles

• Firebase
• Firebase Authentication
   

Refers to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Learning Ninja! 🥷