↑ ↓ navigate↵ selectesc close

Firebase Project Hosting

Lesson 1 / 8Course Lessons Outline
▾

Firebase Console

Go to the Firebase Console. 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 it also has a great guide.If you are all new to programming you may not have installed Node or NPM 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

npm install -g firebase-tools

Login with firebase

firebase login

Make a new directory

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

Initialize firebase

firebase init

Selections

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

Firebase project file

.firebaserc

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

Firebase hosting file

firebase.json

{
  "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.

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.

✏️ Architecture Diagram: Angular Material: Firebase Project Hosting
LAYERED SYSTEM STACKARCHITECTURE DIAGRAM
Architecture Diagram: Angular Material: Firebase Project HostingLAYERED SYSTEM STACK showing: Node 1: Section 1 (Schema & deterministic boundary) -> Node 2: Angular Material (Execution & state transitions) -> Node 3: Verified Production Artifact (Production output & telemetry). Content-driven layered-stack diagram for Angular Material: Firebase Project Hosting: Section 1 -> Angular Material -> Verified Production Artifact.STAGE 01Section 1Schema & deterministic boundary1. Section 1STAGE 02Angular MaterialExecution & state transitions2. Angular MaterialSTAGE 03Verified Production ArtifactProduction output & telemetryTyped Contract
[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→