Firebase Hosting is a widely popular hosting platform used for web applications, static websites, and Single-Page Applications (SPAs). It offers a fast, secure, and dependable way to deploy web applications to a global Content Delivery Network (CDN) with just a few clicks.
In this blog post, we will go over the steps involved in setting up and deploying a web application using Firebase Hosting.
Step 1: Create a Firebase Project To use Firebase Hosting, the first step is to create a Firebase project. To create a new Firebase project, head over to the Firebase Console and click on the "Add Project" button. Follow the prompts to create your project.
Step 2: Install the Firebase CLI To use Firebase Hosting, you need to install the Firebase CLI (Command Line Interface). You can install it using npm (Node Package Manager) by running the following command in your terminal: npm install -g firebase-tools
Step 3: Initialize your Firebase Project After installing the Firebase CLI, you need to initialize your Firebase project. To do this, navigate to your project directory in your terminal and run the following command:
firebase init
This command will initiate a wizard that will guide you through the process of initializing your Firebase project.
Prompt 1 : Are you ready to proceed? (Y/n)
Select : Y
Prompt 2 : Which Firebase features do you want to set up for this directory?
Select : Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Prompt 3 : Please select an option
Select : Use an existing project (Because we have already created a project in the Firebase Console)
Prompt 4 : Select a default Firebase project for this directory
Select : Here, select your project created in the Firebase Console.
Prompt 5 : What do you want to use as your public directory? (public)
Select : Click Enter, or if your project is built with any framework like Angular or React, then there must be a build folder (check output path). Type down the name of the folder.
Prompt 6 : Configure as a single-page app (rewrite all URLs to /index.html)?
Select : Select 'y' only if you are using any framework like Angular, React, Vue, etc. Otherwise, select 'N.'
Prompt 7 : Set up automatic builds and deploys with GitHub?
Select : 'N'
That's it! The Firebase initialization is done.
If you chose 'y' in Prompt 6, then: There must be a build folder in your project (e.g., dist). Check the output path in the JSON file. -> Ensure that firebase.json has the same folder in public as the outpath path.
If you chose 'N' in Prompt 6, then: You'll see a 'public' folder in your project that we created in Prompt 5. Inside that, you'll find index.html and 404.html files. Delete those files and add all HTML, JS, CSS files of your project in the public folder by cutting and pasting.
Step 4 : Deploy Your Web Application Once you have initialized your Firebase project, you are ready to deploy your web application to Firebase Hosting. To do this, build your web application and run the following command in your terminal:
firebase deploy
This command will build your web application and deploy it to Firebase Hosting. Once the deployment is complete, you will be provided with a URL where you can access your web application.
Conclusion : Firebase Hosting is an excellent way to deploy web applications quickly and effortlessly. It provides a fast, secure, and reliable way to deploy web applications to a global CDN. By following the steps outlined in this blog post, you can get your web application up and running on Firebase Hosting in no time.
Happy Hosting :)
