bn3t / generator-ngx-firebase-bootstrap

Generator for Angular / Firebase / Bootstrap projects

generator-ngx-firebase-bootstrap

A Yeoman generator for creating projects based on Angular, Firebase and Twitter Bootstrap. This generator provides basic integration with those tools and offers a framework for authentication right out of the box.

Features

• An Angular 7 app generated with angular-cli (Angular 7.2.0)
• Twitter Bootstrap with ngx-bootstrap
• AngularFire 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).
• An Angular Router setup to allow navigation between the following pages of your application:
  • An All-in-one page to show all above components
  • A Home page that shows user information when logged in
  • A Dashboard page as an example of a Guarded page in your application (only available when logged in)
  • A Login page which shows the login component and the reset password component
  • A Register page which shows the register component
  • A LoggedInGuard to use in your router configuration for page that requires the user to be logged in

Now the router setup allows navigation between the pages and the components. You will just need to customize the Home page and add more pages to your own needs.

If you like and/or use this generator, please star this project on Github.

Installation

Requirement Node 10+ && NPM 6+

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

$ node --version && npm --version
v10.13.0
6.5.0

Requirement Angular CLI

To build and run this project, you will need Angular CLI. This version is compatible with @angular/cli 7.2.1. 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

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.2.1
Node: 10.13.0
OS: darwin x64
Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.12.1 (cli-only)
@angular-devkit/core         7.2.1 (cli-only)
@angular-devkit/schematics   7.2.1 (cli-only)
@schematics/angular          7.2.1 (cli-only)
@schematics/update           0.12.1 (cli-only)
rxjs                         6.3.3

Steps to install

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

$ npm install -g yo
$ npm install -g generator-ngx-firebase-bootstrap
# If you want this generator to init a git repository for you
# not supported for the moment: $ npm install -g generator-git-init

Then generate your new project:

$ yo ngx-firebase-bootstrap

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 (See Authenticate Using Google Sign-In with JavaScript). 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 ngx-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.

Not supported for the moment: The generator will also optionally run git init on your project and do an initial commit for you.

Squeleton of the generated app

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 the following pages to help you start with your application featuring a basic router setup.

Navigation Bar

There is a Bootstrap base navigation bar provided as an example.

Login Page

The Home (when not already logged in) has a link to the Login Page which allows to Login via Twitter, Google or Email/Password. The Login page also has the Reset Password component.

Register Page

Also accessible from the Home page, the Register page shows the register component to allow ... guess what.

Home Page

When not logged in the Home Pages shows links to the Login and Register pages, otherwise, it shows user information as shown below.

Dashboard Page

The Dashboard page is an example of a proteted page in your application. The page is protected by the LoggedInGuard that checks the user is logged in before allowing access.

All-in-one Page

This page is available when not logged in and shows all available components in one convenient page.

Run the application

To run the project using Angular CLI, do the following:

$ ng serve                                                                                                                  130 ↵
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-05-20T11:14:31.504Z
Hash: 4c66c7c1edfed1ce558d
Time: 14024ms
chunk {main} main.js, main.js.map (main) 83.8 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 134 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.43 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

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 'yes' for rewrite all urls to index.html
> Enter 'no' for Overwriting dist/index.html

Then build your application for production with AOT.

$ ng build --prod --aot

Then deploy to Firebase.

$ firebase deploy

Angular CLI Specifics

This project was generated with Angular Cli. The project is still compatible with the CLI so you can use it to run your Development server, add more components, etc.

License

Apache-2.0 © Bernard Niset

generator-ngx-firebase-bootstrap's Issues

Basic Routing Setup

A basic routing setup would go a long way in this generator.

Good work, all the same.

Cannot find module 'ng2-bootstrap'

Apparently the reference to ng2-bootstrap is outdated. I am receiving the following error messages when trying to ng serve the project.

ERROR in C:/work/meisterwerk/midge/web-app/src/app/app.module.ts (14,27): Cannot find module 'ng2-bootstrap'.
ERROR in C:/work/meisterwerk/midge/web-app/src/app/app.component.spec.ts (7,27): Cannot find module 'ng2-bootstrap'.`

After changing the references in those two files to 'ngx-bootstrap' the project compiles without problems.

Also see https://www.npmjs.com/package/ng2-bootstrap

this package was renamed to ngx-bootstrap

Registration form is broken

When registering with a new user, get this error in Chrome (Version 68.0.3440.106 (Official Build) (64-bit)):
login:1 [DOM] Found 2 elements with non-unique id #email: (More info: https://goo.gl/9p2vKq) <input _ngcontent-c4 class=​"form-control ng-untouched ng-pristine ng-invalid" id=​"email" name=​"email" required type=​"text" ng-reflect-required ng-reflect-form=​"[object Object]​">​ <input _ngcontent-c5 class=​"form-control ng-untouched ng-pristine ng-invalid" id=​"email" name=​"email" required type=​"text" ng-reflect-required ng-reflect-form=​"[object Object]​">​
And user is automatically logged in, so if navigating back it shows logged in user info with assigned user ID.

On Firefox (61.0.2 (64-bit), nothing happens when hitting registration button, no registration confirmation, and when navigating back, new user is logged in. There's a warning in the console:
Use of Mutation Events is deprecated. Use MutationObserver instead.

As a whole, looks like the registration form is broken.

When registering an already existing user, form doesn't react either, but navigating back has no one logged in.

No 'dist' as public directory - not deploying

Everything worked perectly on localhost,
but I don't get the same index file after deploying.

Q:
Are you sure 'dist' folder is correct.

Thanks for great software.
Rob

From instructions:

In a nutshell:

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

ng test fails right out of the box

When I run ng test on a fresh install of this generator, each test that's already built-in gives me the following error

Failed: Cannot set property 'stack' of undefined
    TypeError: Cannot set property 'stack' of undefined
        at NoProviderError.set [as stack] (webpack:///~/@angular/core/src/facade/errors.js:64:31 <- src/test.ts:6511:61)
        at assignAll (webpack:///~/zone.js/dist/zone.js:704:0 <- src/test.ts:90940:29)
        at NoProviderError.ZoneAwareError (webpack:///~/zone.js/dist/zone.js:775:0 <- src/test.ts:91011:16)
        at NoProviderError.BaseError [as constructor] (webpack:///~/@angular/core/src/facade/errors.js:26:0 <- src/test.ts:6473:16)
        at NoProviderError.AbstractProviderError [as constructor] (webpack:///~/@angular/core/src/di/reflective_errors.js:53:0 <- src/test.ts:47872:16)
        at new NoProviderError (webpack:///~/@angular/core/src/di/reflective_errors.js:102:0 <- src/test.ts:47921:16)
        at ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/src/di/reflective_injector.js:994:0 <- src/test.ts:68688:19)
        at ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/src/di/reflective_injector.js:1031:0 <- src/test.ts:68725:25)
        at ReflectiveInjector_._getByKey (webpack:///~/@angular/core/src/di/reflective_injector.js:981:0 <- src/test.ts:68675:25)
        at ReflectiveInjector_.get (webpack:///~/@angular/core/src/di/reflective_injector.js:743:0 <- src/test.ts:68437:21)
        at TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:818:0 <- src/test.ts:20075:67)
        at CompiledTemplate.proxyViewClass.AppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:152:0 <- src/test.ts:69446:45)
        at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:580:0 <- src/test.ts:69874:49)
        at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/DynamicTestModule/AppComponent/host.ngfactory.js:15:63)
        at CompiledTemplate.proxyViewClass.AppView.createHostView (webpack:///~/@angular/core/src/linker/view.js:108:0 <- src/test.ts:69402:21)

I have used this generator in previous apps with the same release, and this was not a problem. It seems to somehow be related to fixture.detectChanges() in app.component.spec.ts, but I can't figure it out.

Images for Readme

This issue is only meant to store image on the githubusercontent cdn for being referenced from the README.md of the project.

You have to be inside an angular-cli project in order to use the serve command.

When I type the command "ng serve" the following error appears, "You have to be inside an angular-cli project in order to use the serve command."
Do you have any Idea why this may be happening?
I'm using the following:
Thank you bn3t !
angular-cli: 1.0.0-beta.28.3
node: 7.4.0
os: darwin x64
mys-iMac:~ my$

---

Also I'm getting some UNMET PEAR DEPENDENCIES when generating a new project:

yoang2firebaseboot
├─┬ @angular/[email protected]
...
├── UNMET PEER DEPENDENCY @angular/[email protected]
...
├── UNMET PEER DEPENDENCY @angular/[email protected]
...
├─┬ UNMET PEER DEPENDENCY [email protected]
...
└── [email protected]

npm WARN [email protected] requires a peer of tslint@^3.9.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/compiler@~2.2.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@~2.2.0 but none was installed.

mys-iMac:yoang2firebaseboot my$ ng serve

You have to be inside an angular-cli project in order to use the serve command.
mys-iMac:yoang2firebasebootmy$