Angular 2 Firebase App

An app boilerplate using:

• Angular 4
• Angular CLI
• Firebase (angularfire2)
• Ngrx Store and Ngrx Effects

Featuring:

• A full authentication pipeline including both Google and email authentication
• User accounts
• Business logic (using todos as an example)

View the demo

Motivation

The purpose of this boilerplate is to provide a more advanced starting point for angular 2 apps that already features a well defined workflow, state management and design layout.

The template is designed to be easy to build upon and extend to suit your app.

Quickstart

# Clone the repo
git clone https://github.com/bave8672/angular-firebase-starter.git

# Change directory to repo
cd angular-firebase-starter

# Use npm or yarn to install the dependencies:
npm install

# OR
yarn

# Start the server
npm run start

Navigate to http://localhost:4200/ in your browser

Highlights

The following sections briefly cover the most important features of this starter app.

Ngrx integration

All app state is managed via the redux pattern, using the Ngrx Store implementation. Components allow the UI to fire actions, and contain minial business logic.

The store is architected similarly to the ngrx example app, with the global reducer composed from several sub-reducers to manage separate concerns.

Effects are used to handle asynchronous state events, such as interacting with the firebase auth and db services.

Firebase authentication

The app supports firebase auth (via both Google OAuth and email/password) out of the box.

In the case of email auth, the app allows the user to update their password, profile picture and resend their verification email.

Adding other auth providers is straightforward: See the firebase docs;

Forms

Forms are always an important aspect of web applications. This starter attempts to standardise form interactions beyond what angular provides by:

• Exclusively using Angular's reactive forms module.
• Requiring all components to inherit from a base FormComponent
• Using an underlying FormState to capture the state of every form (e.g whether a request is in-flight, whether to display an error message...) in a redux-friendly way.
• Providing a shared validation message component to display validation warnings and messages.
• Providing various validation functions and helpers to e.g. parse errors from http results.

Styles

Bootstrap CSS is included by default. To promote customisability, no custom css has been added to the boilerplate, and JQuery and bootstrap's Javascript packages have been excluded.

If you want to use something else like Foundation instead, simply remove the bootstrap package and update the styles.css to import your library of choice, and replace the markup classes with your own.

Since the project uses the CLI, you can also add your own CSS or SASS to components without any extra steps.

Builds, environments and deployment

The project is set up to take advantage of firebase hosting.

Add your project's firebase config to firebase.config.ts, the run

npm run build-deploy

to build the app in production mode and deploy to it to the firebase server.

You can add different firebase configurations for different environments - see the environment files.

In production mode the app's custom error handler will post errors to your firebase db.

Testing

# Run unit tests with coverage in PhantomJS
npm run test

# Debug unit tests in Chrome
npm run test:debug

Planned:

• Better test coverage (currently ~70%)
• E2E Tests