> Canonical URL: https://codingcat.dev/course/angularmaterial/lesson/firebase-project-hosting

# Firebase Project Hosting | Angular Material | CodingCat.dev Course

[🧶 Angular Material](/course/angularmaterial)Section 1.1 · Lesson 1 of 8[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angular](/topic/angular)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)[![](/logos/tags/github-symbol-light.svg)![](/logos/tags/github-symbol-dark.svg)GitHub](/topic/github)[#DevOps](/topic/devops)[Next Lesson →](/course/angularmaterial/lesson/angular-material-router-outlet)

# Firebase Project Hosting

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/be314b2ba96969840c1e0a3db978768c9a491ede-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=sOn3YMdpYR4&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 1 / 8Course Lessons Outline▾1Section 1
- [1.1Firebase Project Hosting](/course/angularmaterial/lesson/firebase-project-hosting)
- [1.2Angular Material Router Outlet](/course/angularmaterial/lesson/angular-material-router-outlet)
- [1.3Firebase Authentication and Authorization](/course/angularmaterial/lesson/firebase-authentication-and-authorization)
- [1.4Angular Material Theming](/course/angularmaterial/lesson/angular-material-theming)
- [1.5Angular Material Dynamic Navigation using Firestore](/course/angularmaterial/lesson/angular-material-dynamic-navigation-using-firestore)
- [1.6Angular Material Forms from Firestore](/course/angularmaterial/lesson/angular-material-forms-from-firestore)
- [1.7Angular Material Reactive Forms Update Firestore](/course/angularmaterial/lesson/angular-material-reactive-forms-update-firestore)
- [1.8Angular Material Router Awareness](/course/angularmaterial/lesson/angular-material-router-awareness)

## Firebase Console

Go to the [Firebase Console](https://console.firebase.google.com/). If this is your first firebase project you will need to Sign in to Google

## Create Project

Now you can click the button to add a new Project

## Hosting

At this point many if the blogs will start talking about setting up the database, but I want to keep this really simple "Hello World" style.You can now navigate over to the hosting area within firebase.

If you take a look at [Firebase hosting quickstart](https://firebase.google.com/docs/hosting/) it also has a great guide.If you are all new to programming you may not have installed [Node or NPM](https://nodejs.org/en/) yet, just follow this link and install the LTS version.

## Hosting Deploy

Now you can select "Get started" to walkthrough the guided tips from Firebase - Hosting.

### Install Firebase Tools

Copied! 🐾

```
npm install -g firebase-tools
```

### Login with firebase

Copied! 🐾

```
firebase login
```

### Make a new directory

Copied! 🐾

```
mkdir ~/Downloads/lesson-1-firebase-project cd ~/Downloads/lesson-1-firebase-project
```

### Initialize firebase

Copied! 🐾

```
firebase init
```

### Selections

- Up/Down key to move to Hosting
- Hit spacebar to make selection
- Enter to continue to next setup
- Navigate to your newly created firebase project
- Hit enter to accept public as location to serve files
- Key n, Enter for not making this a single page app.
- Firebase initialization complete!

### Firebase project file

.firebaserc

Copied! 🐾

```
{
  "projects": {
    "default": "ajonp-lesson-1"
  }
}
```

### Firebase hosting file

firebase.json

Copied! 🐾

```
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

### Deploy firebase

Because you are logged into the CLI, the two files above tell firebase the project to use, and how they will be served on nginx. Now you just need to run the deploy command.

Copied! 🐾

```
firebase deploy
```

Now back inside the firebase console you should see that hosting has now been completed.

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ through the layered stack topology from input contract to production output.

Let’s build it!✏️ Architecture Diagram: Angular Material: Firebase Project HostingLAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for Angular Material: Firebase Project Hosting: Section 1 -> Angular Material -> Verified Production Artifact.AAA Contrast Verified

## related deep dives.

[View All→](/blog)[![The Odin Project 2: Git & GitHub Engineering Workflows](https://cdn.sanity.io/images/hfh83o0w/production/ed2ced73d28d9e429e04e23b418bb53abf123d90-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-git-and-github-workflows)November 4, 2026[![](/logos/tags/git-symbol-light.svg)![](/logos/tags/git-symbol-dark.svg)Git](/topic/git)[![](/logos/tags/github-symbol-light.svg)![](/logos/tags/github-symbol-dark.svg)GitHub](/topic/github)[#DevOps](/topic/devops)[+1](/course/odin-git-and-github-workflows)

### [The Odin Project 2: Git & GitHub Engineering Workflows](/course/odin-git-and-github-workflows)

Understand how Git actually stores snapshots, master branching and interactive rebase, write atomic commits, and automate PR checks with GitHub Actions.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Heads of AI wearing black company logo t-shirts and shaking hands in a circular web of cloud and GPU investments](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d1d83d596ce5899d797cd3aaf1bd0142038f282a-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)October 26, 2026[#AI & Agents](/topic/ai)[![](/logos/tags/anthropic-symbol-light.svg)![](/logos/tags/anthropic-symbol-dark.svg)Anthropic](/topic/anthropic)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)[+4](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)

### [Anthropic's S-1, $518B in cloud commitments, and circular AI capex](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)

Anthropic just filed its Form S-1 for a Nasdaq IPO under ticker ANT, revealing $518B in take-or-pay cloud commitments to Google, AWS, and Microsoft. Here is how Mark Zuckerberg, Elon Musk, Jensen Huang, Sundar Pichai, Satya Nadella, Tim Cook, and Dario Amodei built a circular revenue machine, and what happens to your S&P 500 ETF if it stalls.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/angularmaterial)

## Angular Material

1/81

### Section 1

- [1.1Firebase Project Hosting▶](/course/angularmaterial/lesson/firebase-project-hosting)
- [1.2Angular Material Router Outlet](/course/angularmaterial/lesson/angular-material-router-outlet)
- [1.3Firebase Authentication and Authorization](/course/angularmaterial/lesson/firebase-authentication-and-authorization)
- [1.4Angular Material Theming](/course/angularmaterial/lesson/angular-material-theming)
- [1.5Angular Material Dynamic Navigation using Firestore](/course/angularmaterial/lesson/angular-material-dynamic-navigation-using-firestore)
- [1.6Angular Material Forms from Firestore](/course/angularmaterial/lesson/angular-material-forms-from-firestore)
- [1.7Angular Material Reactive Forms Update Firestore](/course/angularmaterial/lesson/angular-material-reactive-forms-update-firestore)
- [1.8Angular Material Router Awareness](/course/angularmaterial/lesson/angular-material-router-awareness)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)