https://github.com/akshaybabloo/angular-firebase-material-template
Angular with Firebase and Material component template
https://github.com/akshaybabloo/angular-firebase-material-template
angular cookiecutter firebase template
Last synced: 2 months ago
JSON representation
Angular with Firebase and Material component template
- Host: GitHub
- URL: https://github.com/akshaybabloo/angular-firebase-material-template
- Owner: akshaybabloo
- License: mit
- Created: 2021-03-22T00:34:13.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-19T01:08:40.000Z (over 3 years ago)
- Last Synced: 2025-08-09T15:03:41.610Z (11 months ago)
- Topics: angular, cookiecutter, firebase, template
- Language: TypeScript
- Homepage:
- Size: 1.26 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular template with Firebase and Material Component
This is a [Cookiecutter](https://github.com/cookiecutter/cookiecutter) template, I use a lot for projects that use [Google Cloud Platform](https://cloud.google.com/) and it has the following features:
> This project is based on Angular 11
1. Authentication (lazy loading module)
1. Login (component)
2. Register (component)
3. Forgot password request (component)
2. Core
1. A nav-bar component with side-nav on small screens
2. 404 page (empty)
3. Shared
1. Password validator for Forms
2. SnackBar component
4. Angular material
5. Full support for Firebase (with Angularfire)
**Table of Contents**
- [Requirements](#requirements)
- [Usage](#usage)
- [Adding Firebase Configuration](#adding-firebase-configuration)
## Requirements
Before you start using the template make sure you have the following:
1. Firebase project setup done (example: gollahalli-rex)
2. Firebase CLI logged in
3. Cookiecutter CLI
4. A project name for Angular (example: rex-ui)
5. Node JS with NPM and Yarn installed
## Usage
Install Cookiecutter CLI, do the following and follow the instructions:
```
> cookiecutter https://github.com/akshaybabloo/angular-firebase-material-template
project_name [Project-name]: rex-ui
firebase_project_name [Firebase-project-name]: gollahalli-rex
```
> make sure you have `-` (hyphen) instead of space for project names, example `hello world` -> `hollow-world`.
Now `cd rex-ui` and do `yarn install`.
## Adding Firebase Configuration
Copy the firebase configuration settings and paste them in:
1. `/src/environments/environment.prod.ts` - this will be your production configuration, lookout for `TODO` comment
2. `/src/environments/environment.ts` - this will be your development configuration, lookout for `TODO` comment