Introduction to Firebase Hosting

Firebase Hosting is a production-grade web content hosting solution provided by Firebase. It provides a fast, reliable, and secure way to host our applications’ static and dynamic content as well as microservices. With Firebase Hosting, we can deploy web applications to a global Content Delivery Network (CDN) with a single CLI command.

Firebase provides subdomains with all Firebase projects at no cost. Developers can also set up custom domains for their Firebase-hosted sites. All applications deployed with Firebase Hosting are automatically provisioned with SSL certificates, making sure that the content is always delivered securely.

Implementation

To initialize Firebase Hosting on a project, we must run the Firebase CLI’s hosting initialization command on a terminal. This command is similar to the Cloud Functions initialization command we discussed earlier.

Perform the following steps to initialize Firebase Hosting:

1. Run the command below in the root of the project’s directory. This opens up a dialogue that asks us some questions required to initialize Firebase Hosting in a project:

2. Now, we need to associate the directory with a Firebase project. Press the “Enter” key to use an existing project. Then, select the Firebase project associated with the configuration values we are working with. Alternatively, we can include the --project flag alongside the Firebase project ID when running the initialization command above.
3. Next, we must choose a name for our public directory. This directory holds the files for our application and is eventually deployed by Firebase. The default directory is named public, but in our case, we will rename it to build. This is because React.js exports our application to the build folder after running the build command with npm.
4. The next step is to choose whether or not to configure it as a single-page application. This option is for front-end libraries or frameworks like React, Vue, or Angular, which serve only one HTML file. Since our application uses React.js, press the “Y” key and then press “Enter”.
5. Next, we get asked if we need to set up automatic deploys with GitHub. We don’t need that for our current setup, so press the “N” key and then press the “Enter” key.
6. Skip the overwriting of the index.html file in the build folder, andwait for the initialization to complete.

Enable Firebase Hosting

Now, let’s enable Firebase Hosting on our project.

Steps to perform

• Run the command to initialize Firebase Hosting in a Firebase project.
• Follow the steps outlined above to initialize Firebase Hosting in your project.

Note: Don’t forget to include the --token flag alongside the authentication token.