Part One: Angular with Firebase Hosting

Series Breakdown:

• Part One: Angular with Firebase Hosting
• Part Two: Angular with Firestore — Intro
• Part Three: Angular with Firestore — CRUD

Github code, here.

What we will cover:

• Install the Angular CLI
• Create an Angular application
• Serve the project locally
• Install firebase
• Setup our project for firebase hosting
• Build Angular application for production
• Deploy to the world 😊

If you’re missing any of the Firebase prerequisites don’t worry. We have an article covering the full process, here.

Prerequisites:

• Google Account
• Firebase project created (check article here)
• Basic web development knowledge (all though not required)

Angular Project Creation

We need to install the Angular CLI to start building our application.

    $~: yarn global add @angular/cli@latest

Sweet.

Create Angular Application

Time to use the Angular CLI to do some powerful stuff auto-magically. For instance, –routing will create a routing file for us!

    $~: ng new myapp --routing
    $~: cd myapp

Create Components

We’re using the Angular CLI to create two components. Then we will update the app-routing.module.ts file to support our home component and error component.

    $myapp: ng generate component home
    $myapp: ng generate component error

Setup Routing

Open the app-routing.module.ts file and copy the following code. The error component will load anytime someone goes to a route that doesn’t exist using **

import \{ NgModule \} from '@angular/core';
import \{ Routes, RouterModule \} from '@angular/router';
import \{ ErrorComponent \} from './error/error.component';
import \{ HomeComponent \} from './home/home.component';
const routes: Routes = \[
  \{ path: '', component: HomeComponent \},
  \{ path: '\*\*', component: ErrorComponent \}
\];
@NgModule\(\{
  imports: \[RouterModule.forRoot\(routes\)\],
  exports: \[RouterModule\]
\}\)
export class AppRoutingModule \{ \}

Install Bootstrap (Optional)

The ng add command will make all the connections for you. Instead of running npm install --save <> then manually updating the app.module.ts

    $myapp: ng add @ng-bootstrap/schematics

Remove Angular Boilerplate HTML

Open src/app/app.component.html then copy the following code.

<div>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">My App</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" routerLink="">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/non-existent-path">Error</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <!--Router loads component based on url here-->
    <router-outlet></router-outlet>
  </div>
</div>

Create *Beautiful Home Component

Open src/app/home/home.component.html then copy the following code.

<h1>Hey welcome home :)</h1>
<p>Thanks for reading and following along with the tutorial!</p>
<img class="" src="https://cdn-images-1.medium.com/max/1600/1*_p-xSamqef71sErIbqhJlA.png" height="80%" width="80%">

Create *Beautiful Error Component

Open src/app/error/error.component.html then copy the following code.

<h1>This page does not exist</h1>
<img class="" src="https://files.sharenator.com/memes_page_not_found-s400x380-160962.jpg">

Serve Locally

Alright, let’s run it. Navigate to http://localhost:4200/ The app will automatically reload if you change any of your files. Play around with different routes (e.g. / and /non-existent-path ) to trigger our home and error components.

    $myapp: ng serve -o

Firebase Hosting

We will skip a detailed breakdown of each step. If you’re interested in that, please read Deploy HTTPS website with Firebase CLI.

Install Firebase CLI and Grant Access

Firebase needs access to your firebase account. This is linked through your Google account so running firebase login will prompt you to sign in and grant limited access.

    $~: yarn global add firebase-tools
    $~: firebase login

Create a Firebase Project

• Go to Firebase Console
• Create a new project called, myapp
• Hit Create

Initialize Firebase Project

    $myapp: firebase init

Select Hosting

Select Project

    ? Select a default Firebase project for this directory:
      \[don't setup a default project\]
    ❯ \[myapp \(myapp-xxxyz\)\]
      \[create a new project\]

Choose what directory will be deployed to Firebase Hosting

Set dist/myapp as your public directory. This is the folder where ng build --prod will output too.

    ? What do you want to use as your public directory? (public) dist/myapp
    ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
    i  Writing configuration info to firebase.json...
    i  Writing project information to .firebaserc...
    ✔  Firebase initialization complete!

So sweet.

Lets build our Angular App for Production

$myapp: ng build --prod

Deploy your Angular App to The World

Serving locally is great for testing and making sure everything is working as it should. Once we are ready to make our website live. We can run the following command.

    $myapp: firebase deploy
    === Deploying to 'myapp-xxxyz'...
    i  deploying hosting
    i  hosting[myapp-xxxyz]: beginning deploy...
    i  hosting[myapp-xxxyz]: found 8 files in dist/
    ✔  hosting[myapp-xxxyz]: file upload complete
    i  hosting[myapp-xxxyz]: finalizing version...
    ✔  hosting[myapp-xxxyz]: version finalized
    i  hosting[myapp-xxxyz]: releasing new version...
    ✔  hosting[myapp-xxxyz]: release complete

    ✔  Deploy complete!

    Project Console: https://console.firebase.google.com/project/myapp-xxxyz/overview
    Hosting URL: https://myapp-xxxyz.firebaseapp.com

Open your website using the Hosting URL

Congratulations! You just created an Angular application and deployed that application as an HTTPS website in a couple of minutes. Which is also distributed across Google’s network and cached on SSDs for super fast delivery times. Thanks to Firebase and the Angular CLI.

Review

• Install the Angular CLI
• Create an Angular application
• Serve the project locally
• Install firebase
• Setup our project for firebase hosting
• Build Angular application for production
• Deploy to the world 😊

What’s next?

Stay tuned for weekly releases of the Angular Firebase series. Where we will be covering hosting, databases, cloud functions, cloud storage, and authentication!

Now that you have your local machine setup with Firebase CLI. Try taking it a step further and looking into Cloud Functions with Firebase, Cloud Storage with Firebase, and Firestore (my favorite).

Of course, you can do a lot more than just what the Firebase CLI supports. Check out all the Firebase services, here.

Good luck with your journey into the world of Serverless!

Thanks for reading :)