{"id":15180444,"url":"https://github.com/bn3t/generator-ngx-firebase-bootstrap","last_synced_at":"2025-10-01T20:32:36.922Z","repository":{"id":44993633,"uuid":"76143166","full_name":"bn3t/generator-ngx-firebase-bootstrap","owner":"bn3t","description":"Generator for Angular / Firebase / Bootstrap projects","archived":true,"fork":false,"pushed_at":"2022-01-15T01:30:08.000Z","size":951,"stargazers_count":43,"open_issues_count":9,"forks_count":9,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2025-01-09T11:24:01.909Z","etag":null,"topics":["angular","authentication","bootstrap","firebase","firebase-authentication","oauth2","password-reset","register-page","twitter-bootstrap","yeoman","yeoman-generator"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/generator-ngx-firebase-bootstrap","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bn3t.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-10T23:20:14.000Z","updated_at":"2023-09-07T10:59:44.000Z","dependencies_parsed_at":"2022-09-13T08:12:35.645Z","dependency_job_id":null,"html_url":"https://github.com/bn3t/generator-ngx-firebase-bootstrap","commit_stats":null,"previous_names":["bn3t/generator-angular2-firebase-bootstrap"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bn3t%2Fgenerator-ngx-firebase-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bn3t%2Fgenerator-ngx-firebase-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bn3t%2Fgenerator-ngx-firebase-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bn3t%2Fgenerator-ngx-firebase-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bn3t","download_url":"https://codeload.github.com/bn3t/generator-ngx-firebase-bootstrap/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234897368,"owners_count":18903646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","authentication","bootstrap","firebase","firebase-authentication","oauth2","password-reset","register-page","twitter-bootstrap","yeoman","yeoman-generator"],"created_at":"2024-09-27T16:06:42.902Z","updated_at":"2025-10-01T20:32:36.587Z","avatar_url":"https://github.com/bn3t.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# generator-ngx-firebase-bootstrap [![NPM version][npm-image]][npm-url] [![Build Status](https://travis-ci.org/bn3t/generator-ngx-firebase-bootstrap.svg?branch=develop)](https://travis-ci.org/bn3t/generator-ngx-firebase-bootstrap)\n\nA Yeoman generator for creating projects based on Angular, Firebase and Twitter Bootstrap. This generator provides basic integration\nwith those tools and offers a framework for authentication right out of the box.\n\n![angular-220px](https://cloud.githubusercontent.com/assets/1102723/24071875/b0571ecc-0bdc-11e7-940f-dc042b0578ef.png)\n![bootstrap-social-logo-220px](https://cloud.githubusercontent.com/assets/1102723/24071881/bca110f2-0bdc-11e7-933d-7ac4d972cee4.png)\n![firebase_16-logo-220px](https://cloud.githubusercontent.com/assets/1102723/24071871/a1a11446-0bdc-11e7-9161-399fd17f4829.png)\n\n## Features\n\n- An **Angular 7** app generated with angular-cli (Angular 7.2.0)\n- Twitter Bootstrap with ngx-bootstrap\n- AngularFire and Firebase\n- An initial implementation of an authentication service (See auth-service)\n- One component to display user information\n- One component to login using username/password, Google or Twitter\n- One component to allow a user to register himself with username/password.\n- One component for password reset (when using username/password).\n- An Angular Router setup to allow navigation between the following pages of your application:\n  - An All-in-one page to show all above components\n  - A Home page that shows user information when logged in\n  - A Dashboard page as an example of a Guarded page in your application (only available when logged in)\n  - A Login page which shows the login component and the reset password component\n  - A Register page which shows the register component\n  - A LoggedInGuard to use in your router configuration for page that requires the user to be logged in\n\nNow the router setup allows navigation between the pages and the components. You will just need to customize the Home page\nand add more pages to your own needs.\n\nIf you like and/or use this generator, please star this project on Github.\n\n## Installation\n\n### Requirement Node 10+ \u0026\u0026 NPM 6+\n\nThis generator is targeted to be used with Node \u003e= 10.0.0 and NPM \u003e= 6.0.0. You can check your version number with the command\n\n```shell\n$ node --version \u0026\u0026 npm --version\nv10.13.0\n6.5.0\n```\n\n### Requirement Angular CLI\n\nTo build and run this project, you will need Angular CLI. This version is compatible with @angular/cli 7.2.1. If you have\nany previous instantiation of the Angular CLI, you should remove them.\n\n```shell\n$ npm uninstall -g angular-cli # remove any previous angular-cli\n$ npm i -g @angular/cli\n$ ng --version\n\n     _                      _                 ____ _     ___\n    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|\n   / △ \\ | '_ \\ / _` | | | | |/ _` | '__|   | |   | |    | |\n  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |\n /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|\n                |___/\n\n\nAngular CLI: 7.2.1\nNode: 10.13.0\nOS: darwin x64\nAngular: undefined\n...\n\nPackage                      Version\n------------------------------------------------------\n@angular-devkit/architect    0.12.1 (cli-only)\n@angular-devkit/core         7.2.1 (cli-only)\n@angular-devkit/schematics   7.2.1 (cli-only)\n@schematics/angular          7.2.1 (cli-only)\n@schematics/update           0.12.1 (cli-only)\nrxjs                         6.3.3\n```\n\n### Steps to install\n\nFirst, install [Yeoman](http://yeoman.io) and generator-ngx-firebase-bootstrap using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).\n\n```shell\n$ npm install -g yo\n$ npm install -g generator-ngx-firebase-bootstrap\n# If you want this generator to init a git repository for you\n# not supported for the moment: $ npm install -g generator-git-init\n```\n\nThen generate your new project:\n\n```shell\n$ yo ngx-firebase-bootstrap\n```\n\n## Getting Started\n\nYou should have your Firebase project created in Firebase. For this, go to the\n[Firebase Console](https://console.firebase.google.com/) and create a new project, in the newly\ncreated project go to 'Add Firebase to your web app'. This option will give you all the\ncredential information you will need when generating your project. For authentication to work, you\nshould enable the Authentication methods you want to use (See [Authenticate Using Google Sign-In with JavaScript](https://firebase.google.com/docs/auth/web/google-signin)). The seeded project contains a auth-service\nprovider that can handle several types of authentication.\n\n### Steps to scaffold a new project\n\n1.  Create a project folder and enter it: `mkdir myproject \u0026\u0026 cd $_`\n2.  Generate project: `yo ngx-firebase-bootstrap`\n\nThe generator will ask you a few information on your Firebase project:\n\n- Your Api Key\n- Your Auth Domain\n- Your Database URL\n- Your Storage Bucket\n- Your Messaging SenderId\n\nYou should have those handy when you run the generator. Otherwise, you can go and fill\nin those values in the firebaseConfig.ts file in the generated project.\n\n_Not supported for the moment_: The generator will also optionally run `git init` on your project and do an initial commit for you.\n\n## Squeleton of the generated app\n\nThe generated project will contain example code to authenticate to your project in Firebase.\nFor this to actually work, you will have to enable authentication in your firebase project.\nThe project supports Email/Password, Google Sign-In and Twitter. You could probably use Facebook and Github\nbut we never tested that.\n\nGo to [Firebase Authentication Documentation](https://firebase.google.com/docs/auth/) to find out how to\nenable authentication for your project in Firebase. Please note that to use Email/Password authentication,\nso you will have to register users yourself via the Firebase Console.\n\nThe generated project will contain the following pages to help you start with your application featuring a basic router\nsetup.\n\n### Navigation Bar\n\nThere is a Bootstrap base navigation bar provided as an example.\n\n![Navigation Bar](https://user-images.githubusercontent.com/1102723/27261010-9900d58c-543a-11e7-9c05-ba194e499f31.png)\n\n### Login Page\n\nThe 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.\n\n![Login Page](https://user-images.githubusercontent.com/1102723/27261022-f6852f14-543a-11e7-9a04-8bfd2f16ec53.png)\n\n### Register Page\n\nAlso accessible from the Home page, the Register page shows the register component to allow ... guess what.\n\n![Screenshot](https://user-images.githubusercontent.com/1102723/27261046-73876626-543b-11e7-8859-c8a4479d6c21.png)\n\n### Home Page\n\nWhen not logged in the Home Pages shows links to the Login and Register pages, otherwise, it shows user information as shown below.\n\n![Home Page when Logged In](https://user-images.githubusercontent.com/1102723/27261122-d3ade218-543c-11e7-92bc-daf42a0d08b4.png)\n\n### Dashboard Page\n\nThe Dashboard page is an example of a proteted page in your application. The page is protected by the LoggedInGuard that\nchecks the user is logged in before allowing access.\n\n![Dashboard Page](https://user-images.githubusercontent.com/1102723/27261123-d8725036-543c-11e7-9f7d-0a5f6ae97e5e.png)\n\n### All-in-one Page\n\nThis page is available when not logged in and shows all available components in one convenient page.\n\n![All-in-one Page](https://user-images.githubusercontent.com/1102723/27261168-744afe22-543d-11e7-90da-d63de4347af2.png)\n\n## Run the application\n\nTo run the project using Angular CLI, do the following:\n\n```shell\n$ ng serve                                                                                                                  130 ↵\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\nDate: 2018-05-20T11:14:31.504Z\nHash: 4c66c7c1edfed1ce558d\nTime: 14024ms\nchunk {main} main.js, main.js.map (main) 83.8 kB [initial] [rendered]\nchunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]\nchunk {styles} styles.js, styles.js.map (styles) 134 kB [initial] [rendered]\nchunk {vendor} vendor.js, vendor.js.map (vendor) 6.43 MB [initial] [rendered]\nℹ ｢wdm｣: Compiled successfully.\n```\n\nPlease refer to Angular CLI documentation below.\n\n## Deploy to Firebase Hosting\n\nTo deploy your application to Firebase Hosting you should follow the instructions as explained at [Deploy Your Site](https://firebase.google.com/docs/hosting/deploying) in the Firebase Documentation.\n\nIn a nutshell:\n\n```shell\n$ firebase init\n\n\u003e Choose Hosting\n\u003e Accept default database.rules.json\n\u003e Choose 'dist' as your public directory\n\u003e Enter 'yes' for rewrite all urls to index.html\n\u003e Enter 'no' for Overwriting dist/index.html\n```\n\nThen build your application for production with AOT.\n\n```shell\n$ ng build --prod --aot\n```\n\nThen deploy to Firebase.\n\n```shell\n$ firebase deploy\n```\n\n## Angular CLI Specifics\n\nThis project was generated with [Angular Cli](https://github.com/angular/angular-cli/wiki). The project is still compatible\nwith the CLI so you can use it to run your Development server, add more components, etc.\n\n### License\n\nApache-2.0 © [Bernard Niset]()\n\n[npm-image]: https://badge.fury.io/js/generator-ngx-firebase-bootstrap.svg\n[npm-url]: https://npmjs.org/package/generator-ngx-firebase-bootstrap\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbn3t%2Fgenerator-ngx-firebase-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbn3t%2Fgenerator-ngx-firebase-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbn3t%2Fgenerator-ngx-firebase-bootstrap/lists"}