npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-angular2-firebase-bootstrap

v1.2.0

Published

Generator for Angular 2 - Firebase - Bootstrap projects

Downloads

29

Readme

generator-angular2-firebase-bootstrap NPM version Build Status Dependency Status

A Yeoman generator for creating projects based on Angular, Firebase and Twitter Bootstrap.

angular-220px bootstrap-social-logo-220px firebase_16-logo-220px

This will be the last version of the project generator-angular2-firebase-bootstrap before it gets renamed to generator-ngx-firebase-bootstrap with support of Angular 4 and beyond.

Features

  • An Angular 2 app generated with angular-cli
  • Twitter Bootstrap with ng2-bootstrap
  • AngularFire2 and Firebase
  • An initial implementation of an authentication service (See auth-service)
  • One component to display user information
  • One component to login using username/password, Google or Twitter
  • One component to allow a user to register himself with username/password.
  • One component for password reset (when using username/password).

It is up to you to use these component in your own pages. When the project is scaffolded they all included on the home page for demo purposes.

Installation

Requirement Node 6+ && NPM 3+

This generator is targeted to be used with Node >= 6.9.0 and NPM >= 3.0.0. You can check your version number with the command

$ node --version && npm --version

Requirement Angular CLI

To build and run this project, you will need Angular CLI. This version is compatible with @angular/cli rc2. If you have any previous instantiation of the Angular CLI, you should remove them.

$ npm uninstall -g angular-cli # remove any previous angular-cli
$ npm i -g @angular/cli
$ ng --version # make sur you have the correct version of angular/cli
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 6.10.1
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/compiler-cli: 2.4.10
@angular/cli: 1.0.0

Steps to install

First, install Yeoman and generator-angular2-firebase-bootstrap using npm (we assume you have pre-installed node.js).

$ npm install -g yo
$ npm install -g generator-angular2-firebase-bootstrap
# If you want this generator to init a git repository for you
$ npm install -g generator-git-init

Then generate your new project:

$ yo angular2-firebase-bootstrap

Features

  • An Angular 2 generated with angular-cli.
  • Bootstrap with ng2-bootstrap
  • AngularFire2 for Firebase
  • An initial implementation of an authentication service (See auth-service)
  • One ready to use component to display user information (from Firebase)
  • One ready to use component to login using username/password, Google or Twitter.

Getting Started

You should have your Firebase project created in Firebase. For this, go to the Firebase Console and create a new project, in the newly created project go to 'Add Firebase to your web app'. This option will give you all the credential information you will need when generating your project. For authentication to work, you should enable the Authentication methods you want to use. The seeded project contains a auth-service provider that can handle several types of authentication.

Steps to scaffold a new project

  1. Create a project folder and enter it: mkdir myproject && cd $_
  2. Generate project: yo angular2-firebase-bootstrap

The generator will ask you a few information on your Firebase project:

  • Your Api Key
  • Your Auth Domain
  • Your Database URL
  • Your Storage Bucket
  • Your Messaging SenderId

You should have those handy when you run the generator. Otherwise, you can go and fill in those values in the firebaseConfig.ts file in the generated project.

The generator will also optionally run git init on your project and do an initial commit for you.

Firebase Authentication example

The generated project will contain example code to authenticate to your project in Firebase. For this to actually work, you will have to enable authentication in your firebase project. The project supports Email/Password, Google Sign-In and Twitter. You could probably use Facebook and Github but we never tested that.

Go to Firebase Authentication Documentation to find out how to enable authentication for your project in Firebase. Please note that to use Email/Password authentication, so you will have to register users yourself via the Firebase Console.

The generated project will contain 3 ready to be used components for login, register and display user information. They are initially present in the home page of the application but can be moved elsewhere at your convenience.

Screenshot

Run the application

To run the project using Angular CLI, do the following

$ ng serve

Please refer to Angular CLI documentation below.

Deploy to Firebase Hosting

To deploy your application to Firebase Hosting you should follow the instructions as explained at Deploy Your Site in the Firebase Documentation.

In a nutshell:

$ firebase init

> Choose Hosting
> Accept default database.rules.json
> Choose 'dist' as your public directory
> Enter 'no' for rewrite all urls to index.html

Then build your application for production with AOT.

$ ng build --prod --aot

Then deploy to Firebase.

$ firebase deploy

Angular 2 CLI Specifics

This project was generated with angular-cli version 1.0.0-beta.21. It currently runs fine with angular-cli version 1.0.0-beta.28.3. It also supports AOT.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Further help

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

License

Apache-2.0 © Bernard Niset