Overview

Hi everyone 👋

A few weeks ago, I came across Firebase Hosting for one of my projects and... wow!
In this article, I'll walk you through everything you need to know about Firebase Hosting, from what it is to how to deploy your first project. If you've ever wondered about a hassle-free way to host your web applications with lightning-fast performance, you're in the right place!

Let's start! 🤙

What is Firebase Hosting?

Firebase Hosting is Google's web hosting service that's part of the Firebase platform. Think of it as your web app's best friend: it's fast, secure, and incredibly easy to use.

Here's what makes it special:

• Global CDN: Your content gets distributed across Google's global network
• SSL by default: HTTPS everywhere, no extra configuration needed
• Custom domains: Use your own domain name with ease
• Instant deployments: Push changes and see them live in seconds
• Version control: Easy rollbacks when things go wrong
• Integration: Works seamlessly with other Firebase services

The best part? It's free for most small to medium projects! 💰

Choose Your Project Type

Before we jump into the setup, let's talk about what you can host on Firebase:

• Static websites: HTML, CSS, JavaScript files
• Single Page Applications: React, Vue, Angular apps
• Progressive Web Apps: With offline capabilities
• Server-side rendered apps: Next.js, Nuxt.js (with some configuration)

Firebase Hosting is particularly great for frontend applications, but you can definitely host full-stack apps too (build with Nuxt.js for example) 🎯

Setting Up Firebase Hosting

Alright, time to get our hands dirty! Let's set up Firebase Hosting step by step.

Step 1: Install Firebase CLI

First, you'll need the Firebase CLI tools. Open your terminal and run:

npm install -g firebase-tools

Step 2: Login to Firebase

Authenticate with your Google account:

firebase login

This will open your browser where you can sign in with your Google account.

Step 3: Initialize Your Project

Navigate to your project directory and initialize Firebase:

firebase init

You'll see a menu like this:

? Which Firebase CLI features do you want to set up for this folder?
❯◯ Hosting: Configure and deploy Firebase Hosting sites

Select "Hosting" using the spacebar and hit Enter.

Step 4: Configure Your Project

The CLI will ask you a few questions:

1. Select a project: Choose an existing Firebase project or create a new one
2. Public directory: Usually dist, build, or public depending on your setup
3. Single-page app: Say "Yes" if you're building a SPA
4. GitHub integration: You can set this up later if needed

Here's what a typical configuration looks like:

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No

Project Structure After Setup

After initialization, you'll see these new files in your project:

your-project/
├── firebase.json
├── .firebaserc
├── dist/ (or your chosen public directory)
└── .gitignore

The firebase.json file is your configuration hub. Here's what a basic setup looks like:

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

Deploy Your First Site 🚀

Ready for the magic moment? Let's deploy!

Build Your Project

First, make sure your project is built and ready:

# In my case this is the command
npm run build

Deploy to Firebase

Now for the moment we've all been waiting for:

firebase deploy

You'll see output like this:

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project
Hosting URL: https://your-project.web.app

That's it! Your site is live! 🎉

Pricing and Limits

Firebase Hosting has a generous free tier:

• Storage: 10 GB
• Transfer: 10 GB per month
• Custom domains: Yes, even on free tier!
• SSL certificates: Free

For most personal projects and small businesses, the free tier is more than enough! 💪

Conclusion

Firebase Hosting is honestly one of the easiest ways to get your web application online. With global CDN, automatic SSL, and seamless integration with other Firebase services, it's hard to beat.

Whether you're building a simple portfolio site or a complex single-page application, Firebase Hosting has got you covered. The deployment process is so smooth that you'll wonder why you ever struggled with traditional hosting providers!

Happy coding ✨

Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹