Hosting setup and deployment in Firebase - Mini Project: Build & Apply

Hosting Setup and Deployment with Firebase

📖 Scenario: You are creating a simple website and want to host it using Firebase Hosting. This project will guide you through setting up Firebase Hosting step-by-step, so your website can be live on the internet.

🎯 Goal: Set up Firebase Hosting for a website by initializing Firebase in your project, configuring the hosting settings, deploying the site, and confirming the deployment.

📋 What You'll Learn

Create a Firebase project configuration file

Add a hosting configuration to the Firebase config

Write the deployment command in the configuration

Complete the Firebase hosting setup for deployment

💡 Why This Matters

🌍 Real World

Hosting websites on Firebase is common for developers who want fast, secure, and scalable hosting without managing servers.

💼 Career

Understanding Firebase Hosting setup is useful for roles in web development, DevOps, and cloud infrastructure management.

1

Create Firebase project configuration file

Create a file named firebase.json with the exact content: {"hosting": {"public": "public"}} to specify the hosting public directory.

Firebase

# Create a file named firebase.json with hosting public directory set to "public"
# Your code here

Need a hint?

This file tells Firebase where your website files are located.

2

Add hosting configuration to Firebase config

Add a firebaseConfig object in a file named firebaseConfig.js with these exact keys and values: apiKey: "AIza...", authDomain: "your-project.firebaseapp.com", projectId: "your-project", storageBucket: "your-project.appspot.com", messagingSenderId: "1234567890", appId: "1:1234567890:web:abcdef".

Firebase

{"hosting": {"public": "public"}}

// Create firebaseConfig object with exact keys and values
// Your code here

Need a hint?

This config connects your app to your Firebase project.

3

Write deployment command in package.json scripts

In package.json, add a scripts section with a deploy command that runs firebase deploy --only hosting exactly.

Firebase

{"hosting": {"public": "public"}}

const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef"
};

// Add scripts section with deploy command in package.json
// Your code here

Need a hint?

This script lets you deploy your site with one command.

4

Complete Firebase hosting setup for deployment

Add the firebase init hosting command in your terminal to initialize hosting, then confirm the public directory is set to public and choose to configure as a single-page app by typing y.

Firebase

{"hosting": {"public": "public"}}

const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef"
};

"scripts": {
  "deploy": "firebase deploy --only hosting"
}

# Run firebase init hosting and configure public directory and SPA
# Your code here

Need a hint?

This command sets up Firebase Hosting interactively.