Module 8: Cleanup and Deploy

Goals

• Clean up some user experience issues

• Deploy the project to Firebase

Make “Cancel” buttons work

You might notice that throughout this entire project, we’ve only written code for the “Submit” buttons, and we’ve completely ignored all those poor “Cancel” buttons! Let’s give them something to do, in fact, let’s make them all do the same thing.

• Cancel from the Login page → Send you to the Home page

• Cancel from the Register page → Send you to the Home page

• Cancel from the Create page → Send you to the Home page

• Cancel from the Edit page → Send you to the Home page

Open login.component.html and make the Cancel button send users to the Home page.

<button class="btn btn-primary btn-md" routerLink="/">Cancel</button>

Do the same thing in: register.component.html, create.component.html, edit.component.html.

Route to Home after message creation

As it stands, when someone creates a new message, they stay stuck on the Create page with no indication of successful message creation. This definitely needs to change. Open message.service.ts and send the user back to the Home page after the new message is sent to Firebase. Your sendMessage should look like this:

sendMessage(messageTitle, messageContent) {
    const newMessage = {
      title: messageTitle,
      content: messageContent,
      owner: this.afAuth.auth.currentUser.uid
    };
    this.afd.list('/messages').push(newMessage).then(() => {
      this.router.navigateByUrl('/');
    });
  }

Secure the Edit and Delete buttons

On the Home page, anyone and everyone can edit or delete every single post, which is probably a bad idea! We only want the owner of the message to see the “Edit” and “Delete” buttons for said message. If you remember back near the beginning of this project, we learned about controlling visibility with the Angular directive “*ngIf”, review Module 3 if you don’t remember how this works.

We only want the “Edit” and “Delete” buttons to appear if the current user’s “uid” matches that message’s “owner” property. We haven’t imported AngularFireAuth into the Home component yet, so let’s do that first. Since we’ll reference this module in the HTML file, make sure to declare it using the “public” keyword. Your home.component.ts should look like this:

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';

import { MessageService } from '../services/message.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(public messageService: MessageService, public afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.messageService.getAllMessages();
  }

}

Now let’s edit the home.component.html file so we will only see the buttons if our current user’s ID matches each message’s owner property. Change your div with the edit and the delete buttons to have this ngIf.

<div class="d-flex align-items-center" *ngIf="afAuth.auth.currentUser.uid === message.owner">
            <button class="btn btn-primary" (click)="messageService.editThisMessage(message)">Edit</button>
            <button class="btn btn-primary" (click)="messageService.deleteThisMessage(message.key)">Delete</button>
          </div>

Load up the website, you should see an error. Angular gives us a hint about what’s happening in the error message. Angular is telling is that it can’t read a property “uid” of some “null” object. This means that “currentUser” must be null. So there is no current user, well when we’re logged out, of course there’s no current user. Adjust your “*ngIf” statement to make currentUser conditional.

<div class="d-flex align-items-center" *ngIf="(afAuth.auth.currentUser)?.uid === message.owner">

Serve up your website and try it again - there should be no more red in the console, and it should work without issue! Only messages that the current user created will have the “Edit” and “Delete” buttons visible.

We’ve finally completed our app, now it's time to deploy!

Deploy

Install the Firebase Tools

There is a completely separate NPM package for deploying to Firebase. Let’s install that globally. 1. Run npm install -g firebase-tools, this is another package that could take a few minutes to install. 2. When completed, run firebase login, and allow Firebase to collect usage and error information. 3. You will be prompted to open a link to complete the login (in fact, a browser window usually pops up automatically). Login via the Google account you created the project with, and you should see success messages.

Configure the project

We need to configure the settings for this Firebase project. 1. Type firebase init in the console. When it asks, Yes - you are ready to proceed. 2. Using the arrow keys on your keyboard, arrow down to “Hosting” and then press the spacebar. It should now show that “Hosting” has been selected. Press enter. 3. Again, arrow up/down through your choices (probably only one choice right now) until your Message Board project is selected, and then hit enter. 4. When it asks you which folder to use, enter “dist” 5. Then Yes - you want to rewrite all urls - we are building an Angular based Single Page App (SPA).

The configuration is complete! Now it’s time to formally build our project and deploy it!

Build and deploy the project

1. Tell the Angular CLI to build our project. This packages all of our code into a final bundle ready for deployment. Type ng build in your terminal. This can take a long time, depending on the size of the project (small here) and the speed of your computer, it can take 10+ minutes. For a project of this size, it should be 3-4 minutes at the very most.

2. Lets take a quick look at our dist folder. All our build files need to be directly inside our dist folder however angular 6 may be adding a folder with your project name like this. If your dist folder looks like this we need to make a simple change.

   
3. First we will find our project in our explorer window. Then we will need to go into our dist folder and then into the folder in our dist folder. This will show our build files.

   
4. Press ctrl A or select all (command A on Mac) of the files in this folder. You can now cut them out with ctrl X (command X on Mac). We will go back to our dist folder and paste them there. (overwrite any files if prompted) You may need to close and reopen your Visual Studio Code to see the changes you made in your dist folder.

   
5. Now we can test our project by typing firebase serve in the terminal. This will run our project as if it was deployed on firebase. This way we can see how things will look before actually deploying to Firebase. Now you should see everything you built working properly.

6. Now we are ready to deploy the website! Instruct the Firebase Tools package to deploy the website. Type firebase deploy in the terminal. The tools will perform some last minute preparation on the “dist” folder, and then send it off to Firebase. This can take a long time, depending on the size of the project (small here) and the speed of your computer and internet, it can take 10+ minutes. For a project of this size, it should be 5 minutes at the very most.

7. Finally, the success message. Visit the Hosting Url in the browser to see your website up and running.

Congratulations, your website is now hosted for all the world to see!

Since we’re at the end of our project, do a git commit, and admire your new hosted web app!