Serverless Web Applications with React and Firebase

Serverless Web Applications with React and Firebase

by Harmeet Singh, Mayur Tanna
Released April 2018
Publisher(s): Packt Publishing
ISBN: 9781788477413

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build rich and collaborative applications using client-side code with React, Redux, and Firebase

About This Book
  • A practical guide covering the full stack for web development with React 16 and Firebase
  • Leverage the power of Firebase Cloud Storage, messaging, functions, OAuth, and database security to develop serverless web applications.
  • Develop high-performance applications without the hassle of setting up complex web infrastructure.
Who This Book Is For

This book is for JavaScript developers who have some previous knowledge of React and want to develop serverless, full-stack applications but without the hassle of setting up a complex infrastructure.

What You Will Learn
  • Install powerful React.js and Firebase tools to make development much more efficient
  • Create React components with Firebase to save and retrieve the data in real-time
  • Use Firebase Authentication to make your React user interface secure
  • Develop React and Firebase applications with Redux integration
  • Firebase database security rules
  • Firebase Cloud Storage Integration to upload and store data on the cloud
  • Create a complete real-time application with React and firebase
  • Using Firebase Cloud messaging and Cloud functions with React
  • Firebase Cloud Storage integration with React
In Detail

ReactJS is a wonderful framework for UI development. Firebase as a backend with React is a great choice as it is easy, powerful, and provides great developer experience. It removes a lot of boilerplate code from your app and allows you to focus on your app to get it out quickly to users. Firebase with React is also a good choice for Most Viable Product (MVP) development.

This book provides more practical insights rather than just theoretical concepts and includes basic to advanced examples ? from hello world to a real-time seat booking app and Helpdesk application

This book will cover the essentials of Firebase and React.js and will take you on a fast-paced journey through building real-time applications with Firebase features such as Cloud Storage, Cloud Function, Hosting and the Realtime Database. We will learn how to secure our application by using Firebase authentication and database security rules. We will leverage the power of Redux to organize data in the front-end, since Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. Towards the end of the book you will have improved your React skills by realizing the potential of Firebase to create real-time serverless web applications.

Style and approach

Practical insights rather than just theoretical concepts while including basic to advanced examples ? from hello world to a real-time seat booking app and Helpdesk application.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Serverless Web Applications with React and Firebase
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the authors
    2. About the reviewer
    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. Getting Started with Firebase and React
    1. React
      1. Component lifecycle
        1. Methods info
          1. The constructor() method
          2. The render() method
          3. The componentWillMount() method
          4. The componentDidMount() method
          5. The componentWillReceiveProps() method
          6. The shouldComponentUpdate() method
          7. The componentWillUpdate() method
          8. The componentDidUpdate() method
          9. The componentWillUnmount() method
          10. The componentDidCatch() method
    2. Firebase
      1. Realtime Database
        1. Database rules
        2. Backups
        3. Usage
      2. Cloud Firestore
        1. Security rules
      3. Difference between Realtime Database and Cloud Firestore
        1. Data model
        2. Real-time and offline support
        3. Querying
        4. Reliability and performance
        5. Scalability
        6. Security
      4. Crash reporting
      5. Authentication
        1. FirebaseUI authentication for web
      6. Cloud Functions
        1. How does it work?
      7. Cloud Storage
      8. Hosting
      9. Test lab for Android
      10. Performance Monitoring
      11. Google Analytics
      12. Cloud Messaging
      13. Dynamic Links
      14. Remote config
      15. Invites
      16. App indexing
      17. AdMob
      18. AdWords
    3. Getting started with Firebase
      1. Firebase events
        1. value
        2. child_added
        3. child_changed
        4. child_removed
        5. child_moved
    4. Summary
  7. Integrate React App with Firebase
    1. Setting up the environment
      1. Installing React
      2. Using React
      3. React components
      4. What is JSX in React?
        1. Advantages of using JSX in React
        2. How to make your code neat and clean
      5. React Form with JSX
      6. Using React-Bootstrap
        1. Add Ticket Form with React-Bootstrap
      7. Firebase with React
        1. Props and state
        2. The Ref attribute
    2. Summary
  8. Authentication with Firebase
    1. React and Firebase setup with Node.Js
      1. Firebase configuration for authentication
        1. Authentication with Facebook
      2. Creating a login form with React for authentication
        1. Authentication with Facebook
        2. Authentication with Google
          1. Handling account exists errors
        3. Managing the Login across Refresh
        4. Authentication with email and password
          1. Supported types of Auth state persistence
    2. Summary
  9. Connecting React to Redux and Firebase
    1. React setup
    2. Integrating Firebase Realtime Database
    3. What is Redux?
      1. Presentational and Container components
    4. Basics of Redux
      1. Actions
      2. Action creators
      3. Reducers
      4. Store
      5. Data flow
    5. Advanced topics in Redux
    6. Seat booking with Redux
    7. Summary
  10. User Profile and Access Management
    1. Setting up Firebase Admin SDK
      1. Firebase CLI
        1. Installation
        2. Firebase Admin Integration
      2. Using the Firebase Admin Auth API with React
        1. Initializing the Admin SDK
        2. Creating and verifying custom token
        3. Custom claims for admin access and security rules
          1. Adding custom claim with Admin SDK
          2. Verifying custom claim with Admin SDK sending the app
        4. How data is structured in a JSON tree
    2. Summary
  11. Firebase Security and Rules
    1. Security risks and prevention
    2. How secure is your Firebase?
      1. Realtime Database Rules Overview
        1. Authentication
        2. Authorization
        3. Data validation
    3. Rule definition and structure
      1. Query-based rules
    4. Data indexing
    5. Backups
      1. Setup
      2. Restoring from backups
    6. Summary
  12. Using Firebase Cloud Messaging and Cloud Functions with React
    1. Firebase Cloud Messaging (FCM)
      1. Key features of FCM
        1. Sending downstream messages
        2. Sending upstream messages
        3. Versatile message targeting
      2. FCM messages
      3. Setup of Firebase for Javascript web app
        1. Installing Firebase and Firebase CLI
        2. Configuring the browser to receive messages
        3. Client app setup to receive notifications
        4. Server setup to send the notifications
    2. Cloud Functions
      1. Key features of Cloud Functions
        1. Seamless integration with other Firebase Products and third-party APIs
        2. No server to maintain
        3. Private and secure
      2. Life cycle of a function
      3. Setup of Firebase SDK for Cloud Functions
        1. Firebase CLI
        2. Initializing the Firebase Cloud project
        3. Deployment and execution of Cloud Function
      4. Triggering Functions
        1. Realtime Database Triggers
        2. Authentication triggers
        3. Cloud Storage Triggers
        4. HTTP Triggers
        5. Cloud Firestore Triggers
      5. Function termination
    3. Summary
  13. Firebase Cloud Storage
    1. Google Cloud Storage
      1. Key features of Google Cloud Storage
      2. Key concepts
        1. Buckets
        2. Objects
        3. Resources
        4. Object immutability
      3. Storage classes
        1. Multi regional storage
        2. Regional storage
        3. Nearline storage
        4. Coldline storage
        5. Standard storage
      4. Life Cycle Management
      5. APIs and tools
      6. Access control
    2. Key features of Cloud Storage for Firebase
    3. How does it work?
    4. Setting up the Cloud Storage
      1. Upload Files
        1. Adding file metadata
        2. Managing uploads and error handling
      2. Downloading files
      3. Deleting files
    5. Google App Engine
    6. Firebase hosting
      1. Deploying your site
    7. Summary
  14. Best Practices
    1. Best practices with Firebase
      1. Writing the data
      2. Avoid nesting data
        1. Flattern data structure
        2. Avoid arrays
        3. Date object
        4. Custom claims
        5. Managing the user session
      3. Enabling offline capabilities in JavaScript
      4. Optimize database performance
        1. Monitor Realtime Database
      5. Improve performance by metric
        1. Connect your app to multiple database instances
    2. Best practices with React and Redux
      1. Use of Redux
        1. Difference between Redux and Flux
          1. Immutable React State
        2. React Routing
        3. JSX components
          1. Semantics / structured syntax
          2. Use of PropType in React component
          3. Benefit of higher-order components
        4. Redux Architecture benefits
    3. Summary
  15. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Serverless Web Applications with React and Firebase
  • Author(s): Harmeet Singh, Mayur Tanna
  • Release date: April 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788477413