O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hands-on Full Stack Development with Angular 5 and Firebase

Book Description

Build an end-to-end application from development to production by binding Angular with Firebase in this complete guide to web application development

About This Book

  • Build a real-time production-ready web application by leveraging the features of Angular as front end and Firebase as the back end
  • Learn more about authentication, databases, and security with Firebase
  • Learn how to grow your application user base using Google analytics and how to make your application PWA compliant.

Who This Book Is For

This book is for JavaScript developers who have some previous knowledge of the Angular framework and want to start developing serverless applications with Angular and Firebase. If you are looking for a more practical and less theory-based approach to learn these concepts, then this book is for you.

What You Will Learn

  • Understand the core concepts of Angular framework
  • Create web pages with Angular as front end and Firebase as back end
  • Develop a real-time social networking application
  • Make your application live with Firebase hosting
  • Engage your user using Firebase cloud messaging
  • Grow your application with Google analytics
  • Learn about Progressive Web App

In Detail

This book is a complete package for you to build real-time web applications. You will build an end-to-end social networking web application from development to production with Angular as the frontend and Firebase as the backend.

You will create an application called Friends with authentication, friends, and chat features. During the process, you'll use Firebase authentication to register new users and Firebase database to store your extra user data. You'll take a look at how to store and retrieve your user's images from Firebase storage. Then, you'll create a real-time chat module with the Firebase database. Next, you'll secure your database using Firebase security, make your application live with Firebase hosting, and develop your application with analytics.

Moving on, you'll take a look at how to create web pages using bootstrap with HTML, CSS, and TypeScript. You will use the angularfire2 library API in Angular services to interact with Firebase and write unit tests using the Jasmine framework that will help you to write a production-ready application. You'll also discover various debugging techniques to troubleshoot any bug in your application. Finally, you'll make your application Progressive Web Applications compliant.

By the end of this book, you'll be able to confidently build any complex application.

Style and approach

This book takes a practical approach, teaching you to confidently build an end-to-end application from development to production by learning the core concepts of both Angular as a frontend and Firebase as a backend.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. Hands-On Full Stack Development with Angular 5 and Firebase
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  6. Organizing Your Angular Project Structure
    1. Creating a project outline
    2. Project structure
      1. Overview of package.json
    3. Setting up Firebase
      1. Setting up an account for Firebase
    4. Angular terminologies
    5. The application's project structure
      1. App module 
      2. App routing
      3. Authentication module
      4. Authentication routing
      5. Login component
      6. Login component HTML
      7. Login component scss
      8. Login component spec
      9. Authentication service
      10. Date pipe
    6. Common principles
    7. Coding standard guidelines
    8. Summary
  7. Creating a Signup Component
    1. Enabling authentication in Firebase
    2. Introduction to angularfire2
    3. Creating the authentication module
    4. Creating services
      1. Authentication service
      2. User service
    5. Defining domain model
    6. Creating signup templates
      1. FormModule
      2. Bootstrap elements
      3. Angular data binding
    7. Error handling
      1. Firebase errors
    8. Creating a customized alert dialog
    9. Creating a signup component
    10. Summary
  8. Creating a Login Component
    1. Adding login functionalities to existing services
      1. Authentication service
      2. User service
    2. Reusing the domain model
    3. Creating a login template
    4. Error handling for login
      1. Firebase error
    5. Creating a login component
    6. Resetting the password
      1. Adding modal template
      2. Adding the onReset() functionality
      3. Editing the password-reset template in Firebase
    7. Summary
  9. Routing and Navigation between Components
    1. Enabling routes in an app component
    2. Creating a routing module for authentication
    3. Exploring more routing techniques
    4. Adding authentication guards
    5. Firebase session lifecycle
    6. Our project structure as of now
    7. Summary
  10. Creating a User Profile Page
    1. Introduction to RxJS
    2. Passing data between module components
    3. Introduction to SASS
    4. Creating a user profile component
    5. Enhancing services for update operation
    6. Creating an edit dialog component
    7. Firebase session for the update operation
    8. Summary
  11. Creating a User's Friend List
    1. Creating user's friend template
    2. Creating the friend's service
      1. Creating a Firebase node in our database
      2. Implementing the Friend model class
      3. Implementing the friend's service
    3. Creating a friend's component
    4. Creating our first date pipe
    5. Summary
  12. Exploring Firebase Storage
    1. Introducing Firebase storage
    2. Configuring Firebase storage
    3. Uploading the profile picture
    4. Downloading friends images
    5. Deleting the profile images
    6. Handling errors in Firebase storage
    7. Summary
  13. Creating a Chat Component
    1. Creating a chat module
    2. Creating a color variable
    3. Creating a chat component
    4. Creating a chat message list component
    5. Creating a mixin for the message view
    6. Creating a chat message component
    7. Creating a chat message form component
    8. Summary
  14. Connecting Chat Components with Firebase Database
    1. Passing data using route parameters
      1. Adding a route parameter ID
      2. Linking a route to the parameter
      3. Reading the parameter
    2. Passing friend data to different chat components
    3. Designing a Firebase database for chat
    4. Creating a messaging service
    5. Integrating our service to chat components
    6. Summary
  15. Unit Testing Our Application
    1. Introduction to Angular testing
    2. Unit testing an Angular component
    3. Unit testing an Angular service
    4. Unit testing Angular pipe
    5. Code coverage
    6. Summary
  16. Debugging Techniques
    1. Debugging Angular
      1. Installing Augury
      2. Using Augury's features
        1. Component tree
        2. Router tree
        3. NgModules
    2. Debugging a web application
      1. HTML DOM
      2. Layout preview
    3. Debugging TypeScript
      1. Viewing and searching a source file
      2. Putting in breakpoints and watching live values
      3. Adding code in the console window
    4. Debugging CSS
      1. Exploring the styles panel
      2. Discovering and modifying styles
    5. Network debugging
    6. Summary
  17. Firebase Security and Hosting
    1. Introducing Firebase security
    2. Adding security rules for users
    3. Adding security rules for chat messages
    4. Indexing users and friends
    5. Setting up multiple environments
    6. Hosting the friends app in Firebase
    7. Summary
  18. Growing Our Application Using Firebase
    1. Introduction to Firebase cloud messaging
    2. Adding FCM to our application
    3. Google data analytics
    4. Learning about Google adsense
    5. Summary
  19. Transforming Our App into a PWA
    1. Introduction to PWA
    2. Introduction to service worker
    3. Adding our application to phone home screens
    4. Enabling offline mode
    5. Compliance testing using Lighthouse
    6. Summary
  20. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think