Skip to content

Bilal-io/todo-angular2-firebase

 
 

Repository files navigation

CircleCI Coverage Status

Todo app with Angular2, AngularFire2, and Firebase SDK 3

A simple Todo app example built with Angular2 and AngularFire2. The app features a Firebase backend with OAuth authentication. Try the demo at ng2-todo-app.firebaseapp.com.

  • Angular2 2.1.2
  • Angular2 Router 3.1.2
  • AngularFire2 2.0.0-beta.5
  • Firebase SDK 3
    • JSON Datastore
    • OAuth authentication with GitHub, Google, and Twitter
    • Hosting
  • RxJS
  • SASS
  • Typescript
  • Webpack
    • Inlines external SCSS files
    • Inlines external HTML templates
    • Bundles and minifies release builds
    • Injects style and script tags into index.html

Quick Start

$ git clone https://github.com/r-park/todo-angular2-firebase.git
$ cd todo-angular2-firebase
$ npm install
$ npm start

Deploying to Firebase

Prerequisites:

Configure this app with your project-specific details:

// .firebaserc

{
  "projects": {
    "default": "your-project-id"
  }
}
// src/firebase/index.ts

export const firebaseConfig = {
  apiKey: 'your api key',
  authDomain: 'your-project-id.firebaseapp.com',
  databaseURL: 'https://your-project-id.firebaseio.com',
  storageBucket: 'your-project-id.appspot.com'
};

Install firebase-tools:

$ npm install -g firebase-tools

Build and deploy the app:

$ npm run build
$ firebase login
$ firebase use default
$ firebase deploy

Commands

Script Description
npm start Start webpack development server @ localhost:3000
npm run build Lint, test, and build the application to ./target
npm run lint Lint .ts and .js files
npm run lint:js Lint .js files with eslint
npm run lint:ts Lint .ts files with tslint
npm run server Start express server @ localhost:3001 to serve built artifacts from ./target (must run npm run build first)
npm test Run unit tests with Karma and Jasmine, and generate coverage report to ./coverage
npm run test:watch Run unit tests with Karma and Jasmine; watch for changes to re-run tests

About

Todo app with Angular2 • AngularFire2 • Firebase • OAuth • Webpack2

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 47.5%
  • JavaScript 22.6%
  • CSS 21.1%
  • HTML 8.7%
  • Shell 0.1%