General Assembly

Deploying Your App

Wilson Espina

Review

What did we do last lesson?

Deploying Your App

Learning Objective

Learning Objectives

At the end of this class, you will be able to:

  • Understand what hosting is.
  • Understand Firebase Authentication.
  • Understand Firebase security.
  • Use Static Site Hosting.

Deploying Your App

Agenda

  • Update
  • Delete
  • Firebase Authentication
  • Firebase Security
  • Static Site hosting

Deploying Your App

Classroom Resources

  • Pull changes from the wilson-espina/jsd-9-resources repo to your computer
  • In your editor, open the following folder: Documents/JSD/jsd-9-resources/17-deploying-your-app

Introduction to CRUD & Firebase

Update

Code along

Code Along

UPDATE

Code Along

Introduction to CRUD & Firebase

Delete

Lab - Implement Delete Functionality

Exercise

Key Objective

  • Build the Delete functionality of a full-stack app

Type of Exercise

  • Individual / pair

Timing

10mins
  1. Examine the API documentation at
  2. Create a function to delete records from the database.
  3. Add calls to your new function when a user clicks on the delete element.

Deploying Your App

Deploying Your App

Deploying Your App

Firebase Authentication

Deploying Your App

Firebase Authentication

  • Easily add authentication and authorisation to your app with Firebase.
  • Authentication verifies who the user is.
  • Authorisation validates what the user can do.

Deploying Your App

Firebase auth step 1

Deploying Your App

Firebase auth step 2

Deploying Your App

Firebase auth step 3

Deploying Your App

Firebase auth step 4

Deploying Your App

Firebase Auth SDK

auth SDK

Deploying Your App

Config and Initialisation


// Your web app's Firebase configuration
var firebaseConfig = {
// Your app's config properties
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Connect to our Firebase app using the reference URL
const db = firebase.database();

								

// Add authentication ref
const authRef = firebase.auth();

Deploying Your App

Sign in with Google OAuth


const provider = new firebase.auth.GoogleAuthProvider();
  authRef.signInWithPopup(provider)
    .then(() => {
	  // handle signed in state
    });
    .catch(error => {
      console.error(error);
    });
https://firebase.google.com/docs/auth/web/google-signin

Code along

Code Along

Sign-in

Code Along

Lab - Implement Sign Out

Exercise

Key Objective

  • Understand Firebase Authentication

Type of Exercise

  • Individual / pair

Timing

10mins
  1. Examine the API documentation at
  2. Create a function to handle when a user signs out.
  3. Make sure the new function is fired when a user requires signing out.
  4. Add functionality to update the text on the Sign-in / Sign out button.

Deploying Your App

Firebase Security

Deploying Your App

Securing your data

  • Firebase uses security rules in the form of a JSON object.
  • Rules cascade making it possible to create rules that allow you to lockdown entire collections or individual fields.
  • Rules can include variables (using a $).
  • There are built in features for Firebase Authentication.

Deploying Your App

Sample Security Rules


{
  "rules": {
    ".read": true,
    ".write": true
  }
}
  • Everybody can READ and WRITE to the database.

Deploying Your App

Sample Security Rules


{
  "rules": {
    ".read": true,
    ".write": "auth != null"
  }
}
  • auth object relates to the current user.
  • Everybody can READ and only logged in users can WRITE to the database.

Deploying Your App

Sample Security Rules


{
  "rules": {
    ".read": true,
    "messages": {
	  ".write": "auth != null && !data.exists() ||
	  (auth != null && data.exists() && data.child('uid').val() == auth.uid)",
        "$votesId": {
          ".write": "auth != null"
      }
    }
  }
}

Deploying Your App

Security rules


{
  "rules": {
    ".read": true,
  • Everyone can READ documents.

Deploying Your App

Security rules


"messages": {
  ".write": "auth != null && !data.exists() ||
    (auth != null && data.exists() && data.child('uid').val() == auth.uid)",
  • In messages you can write documents IF:
    • You are logged in auth != null AND you are creating a new doc !data.exists()
    • If you are updating a document data.exists(), then the id you are currently logged in with auth.uid must match the id of the uid field in the data you are trying to update data.child('uid').val().

Deploying Your App

Security rules


"$votesId": {
  ".write": "auth != null"
}
  • Anyone who is logged in can update votes.
  • $votesId is the wildcard location for all votes.

Deploying Your App

Database rules

Deploying Your App

Youtube Tutorial

Firebase youtiube tutorial
https://www.youtube.com/watch?v=PUBnlbjZFAI

Activity - Add Security Rules

Exercise

Type of Exercise

  • Individual

Timing

8mins
  1. Go to your projectʼs console.
  2. Navigate to the Database/Rules tab.
  3. Edit the rules and test them with different .read and .write rules.
  4. When done, copy and paste the JSON from Slack into the tab.
  5. Properly format your rules as JSON, publish them and test!

Deploying Your App

Static Site Hosting

Deploying Your App

Firebase Hosting

  1. On firebase.google.com, in the console for your app, click Hosting, then click Get Started.
  2. Execute the command shown using the terminal on your computer, then return to the browser and click Continue.
  3. In your Terminal app, execute the firebase login command.
  4. In your Terminal app, navigate to the folder containing your app files, then execute the firebase init command.
  5. Move the files for your app into the newly created public subfolder.
  6. In your Terminal app, execute the firebase deploy command.

LINK: Lesson Resources

firebase logo

Code along

Code Along

Firebase

Code Along

Deploying Your App

GitHub Pages

  • Head to Settings in Github repo.
  • Scroll to the GitHub Pages Section and click on the Source dropdown menu.
  • Select master branch.
  • Your site will be publish on a https://pages.git.generalassemb.ly URL.

    • LINK: Lesson Resources

Github screenshot

Code along

Code Along

Github Pages

Code Along

Deploying Your App

Surge Hosting

  • Install surge CLI:
    • 
npm install --global surge
  • Switch into your directory where your index.html file is and type:
    • 
surge
  • Follow the prompts
  • Go to surge.sh for more details.
Surge logo

Code along

Code Along

Surge

Code Along

Deploying Your App

Learning Objective

Learning Objectives

  • Understand what hosting is.
  • Understand Firebase Authentication.
  • Understand Firebase security.
  • Use Static Site Hosting.

Deploying Your App

Exit Ticket

(Lesson #17)