How to deploy your web application on Firebase Hosting
Share
Firebase offers many services, including Firebase Hosting, which allows you to deploy your web application with ease and efficiency. In this shot, we will go through the steps for deploying a simple static HTML application on Firebase.
Create a new Firebase project
To create a new project:
-
Open the Firebase console.
-
Click “Add Project”.
-
Enter a project name, e.g., “New Project,” and click “Continue”. If you are signed into Firebase using an organization’s account (e.g. me@educative.io), then it will ask you to select the parent source for your project (which would be “educative,” in this case).
- Enable Google Analytics for this project. As you can see, enabling Google Analytics enables a few extra features we can leverage at a later stage in development. Click “Continue.”
- Choose or create a Google Analytics account. When using an organization’s account, the following page will display some additional options like “Use the default settings for sharing Google Analytics data” and “I accept the Google Analytics terms.”
- Click “Create project.”
After a few moments, the Firebase project will be created! Click “Continue” to open the Firebase project overview.
Register your app with Firebase
Now, the Firebase project is ready to go. Next, we need to register our web application with Firebase. Let’s register our application:
- Select your newly created project on the Firebase console’s project overview page and click the Web icon (
</>) to launch the setup workflow.
- Enter an app nickname (it is a required field). This is only visible internally in the Firebase console.
- Enable Firebase Hosting. This is a convenient way to register the application and enable Firebase Hosting at the same time.
- Click “Register App.”
Add the Firebase SDK
Now, we need to add these Firebase SDK scripts to our application. In this shot, I am going to deploy this example-firebase-app. We need to copy and paste the code snippets at the bottom of the <body> tag. For convenience, I have already added these in the index.html file.
Install Firebase CLI
Firebase command-line interface (CLI) is used to interact with the Firebase web application. We will use it to interact with our application. Install Firebase CLI by entering the following command in the terminal opened in the app root directory:
npm install -g firebase-tools
Deploy the web application
It’s time to deploy your web application. This requires the following simple steps:
-
Open a terminal in the root directory of your app, and run the following command:
firebase loginFollow the instructions on the webpage to log in to Firebase, if you aren’t logged in already.
-
In the same terminal, run the following command:
firebase initThe result will be an interactive interface to configure the Firebase CLI.
-
When you’re asked which Firebase CLI features you want to set up, select the Hosting: “Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys”. Press Enter to confirm your selection.
- Select “Use an existing project” for the next question, then choose the project we created in the Firebase web console earlier and confirm with Enter. If you’re new to Firebase, you will only see one option.
- Press Enter to the question, “What do you want to use as your public directory?” This will automatically create the public folder in your directory. Files inside the public folder will be deployed on the Firebase Hosting.
- Enter “N” when you’re asked, “Configure as a single-page app (rewrite all urls to /index.html)?” Entering “Y” attempts to override the index.html file.
- Enter Y to the question, “Set up automatic builds and deploys with GitHub?” Follow the URL opened and log in to your GitHub.
- Enter the GitHub repository name. In our case, it’s
abdulmonum/example-firebase-app. - Press Enter for the remaining questions and the Firebase initialization process should be completed. You’ll have the following output to your screen:
- Make sure the
index.htmlfile in the public directory is the same as the one in the repository. If there is a default Firebase-createdindex.htmlfile present, replace that with yourindex.htmlfile. - Now, deploying to Firebase hosting is a single command:
You’ll have the following output on your terminal.firebase deploy
Congratulations! You have successfully deployed your first application on Firebase! Open the Hosting URL to view the website.
