Did you just develop your first website and are looking to publish it somewhere? Are you confused by how you can get the thing that is currently running on your localhost onto the internet, so that your friends and family can check it out and be impressed? Or are you a student that simply wants to host their uni project without fees?

Don’t worry, you have come to the right place! I will show you one way of hosting your website on the web – and it is totally free! Let me introduce you to Firebase Hosting.

What is Firebase Hosting?

Firebase Hosting is a service by Google that allows developers to host their web applications fast and securely with just one command.

However, Firebase Hosting only works with static and single-page web apps. If you also wrote some kind of backend (code) that your frontend requires, you could check out how to make use of Cloud Functions or Cloud Run in addition to hosting your frontend with Firebase Hosting. (If you are interested in another article on this topic, let me know!)

For now, though, we will only focus on Firebase Hosting. I will show you how to set it up using an Ionic+React+TypeScript project, but it should also work with other web technologies.

Example Implementation

Step 1: Preparation

First, you will need to create a Firebase project and connect it with your application (“Add Firebase to Your App”), like I described in this article. Check it out and then come back here when you are ready to continue.

Step 2: Set Up Firebase Hosting and Deploy

• In the menu on the left side of the Firebase Console of your Firebase project, choose “Hosting” from the “Build” dropdown list.
• Click “Get started”.
• Follow the instructions on the screen:
  • Install the Firebase CLI
  • Initialise your project
    • When running “firebase init”, it will ask you “Which Firebase features do you want to set up for this directory?”. Select “Hosting”.
    • Select “Use an existing project” and then from the list, choose the correct Firebase project that you already connected your app with.
    • “What do you want to use as your public directory?” I chose “dist”, as this is the folder that my built app gets put into when running “ionic build”. However, this might be different for you.
    • “Configure as a single-page app (rewrite all urls to /index.html)?” In my case, I chose “Yes”.
    • “Set up automatic builds and deploys with GitHub?” This is not necessary, so I chose “No”.

Because of the choices I just made, my newly generated firebase.json file thus looks as follows:

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Therefore, if you end up realising that you made a mistake while initialising the project, you can still change your settings in the firebase.json file.

• Follow the instructions on the screen: (CONTINUED)
  • Finally, build your app (in my case, I run “ionic build” at my app’s root directory) and then deploy it by running “firebase deploy”. It is as easy as that!

Step 3: Inspect Your Website

Congratulations, your app is now accessible from anywhere on the web! Remember in this article when I said that you should be careful when choosing your project’s names? Now is the moment of truth when it will finally be revealed why: the project ID you chose when you set up your project is part of the domain that your website is now running on. Thus, if your project ID is myproject-12345, it will now run on myproject-12345.web.app, or on myproject-12345.firebaseapp.com. This is the domain that Firebase provides you with free of charge. If you would like to host your application on a custom domain, you can purchase a domain on another website that sells domains and then tell Firebase to use it (“Add Custom Domain” from within the “Hosting” tab in the Firebase Console).

However, as a student, if you just want to deploy your uni project because it is a requirement in one of your lectures, using the domain provided by Firebase might be perfectly sufficient.

Conclusion

So this is how you can host your web app using Firebase Hosting. I hope this article was helpful, and I wish you lots of luck with deploying your own apps!

---

This article not affiliated with, supported, or endorsed by Firebase or its parent company, Google. The content shared in the article reflects my own experiences and understanding of the Firebase platform.