Easy Steps to Deploy Your Web App with Firebase Hosting: A Beginner's Guide
Tags: firebase, frontend
Published: 2023-10-25 05:35:20

When it comes to learning programming, Firebase offers a range of services, including databases and hosting, that can be incredibly beneficial. In this article, we will focus on Firebase Hosting, a convenient solution for hosting your first web application and sharing it with others, whether they are friends or fellow programming enthusiasts.

### Getting Started with Firebase Hosting

To begin, you need to create a project on Firebase. Head over to [Firebase website](https://firebase.google.com/) and register for an account. Once registered, access the console by clicking either "Go to console" in the upper right corner or "Get started."

![go to console on firebase website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk1w5g8lr2cvfou70cyx.png)

In the console, select "Add project" and provide a suitable name.

![add new project on firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w61be8hz7vb1583b8svw.png)

Under the Google Analytics option, choose not to enable it, as it's not essential for educational or personal projects. You can always integrate it later if necessary. Once the project is created, click "Continue."

On the project screen, navigate to the left menu and select "All products." From the available options, choose "Hosting" and then click "Get started."

![all products on left menu on firebase website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtftugttnp89onw5wwvm.png)

![add firebase hosting to your project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ou6bsk90mio1aaceu5o.png)

### Setting Up Firebase CLI and Project Connection

Next, install the Firebase Command Line Interface (CLI) on your computer, an essential tool for executing commands via the terminal. The necessary steps are detailed on the project page, but here's a quick rundown with screenshots.

Open your terminal and run the command `npm install -g firebase-tools`. If you are using a MacBook and encounter a permission denied error, try using `sudo npm install -g firebase-tools`, and enter your laptop's password. 'Sudo' grants users the ability to execute commands that require additional security privileges, as in this case, installing something globally on the laptop rather than locally in the project folder.

![install firebase CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzo215ubdifdcx9i05wp.png)

Connect your local project to the Firebase project by ensuring the terminal is in the directory of the project you want to deploy.

![check the directory in terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fpbiedg5b02tcovbh1h.png)

Before proceeding, ensure you update your `npm` version to the latest one, as Firebase has specific requirements. This is crucial to prevent any errors during the subsequent steps.

Invoke the command `firebase login` and log in using the same credentials used during your Firebase registration.

![command to login into firebase through terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws2lx6kumm0f1z34ykr3.png)

Then, run `firebase init` and respond to the prompts as they appear.

![command to init firebase project on your computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r13ne10s72wwl2tivcs3.png)

![specify settings of firebase project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zahnvaxiemrm1stjstx8.png)

![use an existing project on firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev3qv1nuk6zeadmobu92.png)

During this step, your projects from Firebase will be pulled. If you've recently signed up, you'll likely see only one project available for selection.

![choose the project from firebase projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3vhbkeg3l2e87va7c2t.png)

Specify the folder name where you will later build and deploy your project. If you already have a build folder, provide its name, such as "public," "dist," or any other relevant name. For instance, in my case, utilizing React and Vite, the build is stored in the "dist" folder, which I specify.

![specify directory name that will be deployed to firebase hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scipolssh82b4w4ppbtq.png)

On this step, it's crucial to configure your application settings. If you're using a router in your application, make sure to select "y" (yes) to enable it; otherwise, your routing might not function correctly. Additionally, for the question about GitHub build and deployment, choose "N" (no) as it's not relevant to this tutorial. If prompted about overwriting files, select "N" to avoid Firebase overwriting your build files with its default ones.

![configure setting before hosting to firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xltlqjqtzulpn6cxx535.png)

### Building and Deploying Your Web Application

The next step involves building your application if you haven't done so already. Run the appropriate command based on the technologies used in your project. In my case, with React and Vite, the command is `npm run build`.

After building the project, it's time to deploy it. Issue the command `firebase deploy`.

![command to deploy the project to firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp2iyxrznrt8we40ua22.png)

Upon successful deployment, you will receive a notification and a link to view your website. Alternatively, you can revisit the Firebase website, access your project, and find the link in the "Hosting" tab, along with additional information about your site.

![notification that deploy to firebase was successful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ec6hkxx66ftct54of04b.png)

![services that are used in the project on firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnj6bjsjlokuouxaadqr.png)

![details of the deployed project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg0lsbuonolby029xt9o.png)

![more details of the deployed project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grk76gj5dl36oe74f4g7.png)

Initially, you might see "0 files" and encounter errors when accessing the link. Don't worry; this is normal. Give it a few minutes, and everything should be up and running smoothly.

### Conclusion and Cost Considerations

In conclusion, Firebase Hosting is an excellent choice for hosting simple websites or pet projects, especially for educational purposes, as it offers a free tier with ample limits. However, it's important to be aware of their usage thresholds, as exceeding these limits may incur charges. For more details, check the "Pricing" tab on their website. For educational projects, the free tier should more than suffice.

![cost of using firebase services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuufwjmj5ev707ll3lu8.png)

Start your hosting journey with Firebase today, and effortlessly showcase your projects to the world!