https://github.com/webceyhan/ng-comic-book
DC version of "Tour-of-Heroes" built with Angular + Firestore database
https://github.com/webceyhan/ng-comic-book
angular bootstrap css firebase firestore github-actions html javascript nodejs nosql rxjs typescript
Last synced: 3 months ago
JSON representation
DC version of "Tour-of-Heroes" built with Angular + Firestore database
- Host: GitHub
- URL: https://github.com/webceyhan/ng-comic-book
- Owner: webceyhan
- Created: 2020-06-08T17:46:41.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T06:27:29.000Z (over 3 years ago)
- Last Synced: 2024-05-29T19:17:52.010Z (about 2 years ago)
- Topics: angular, bootstrap, css, firebase, firestore, github-actions, html, javascript, nodejs, nosql, rxjs, typescript
- Language: TypeScript
- Homepage: https://comic-book-95862.web.app
- Size: 1.86 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/webceyhan/ng-comic-book/actions/workflows/codeql-analysis.yml)
[](https://github.com/webceyhan/ng-comic-book/actions/workflows/firebase.yml)
# Angular ComicBook Application
This is a sample application based on DC version of the famous tutorial `Tour of Heroes` from the official Angular website, which covers many aspects of the Angular Framework using Firestore database as backend.
[View Demo](https://comic-book-95862.web.app) |
[Report Issue](https://github.com/webceyhan/ng-comic-book/issues) |
[Request Feature](https://github.com/webceyhan/ng-comic-book/pulls) |
[@webceyhan](https://twitter.com/webceyhan)
## Requirements
You need to install the [Node.js](https://nodejs.dev/)
and `npm` package manager first.
> Recommended IDE:
> [VSCode](https://code.visualstudio.com/) + [Angular Essentials](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials)
## Installation
1. Clone the repository.
```sh
git clone https://github.com/webceyhan/ng-comic-book.git
```
2. Get inside the cloned project folder.
```sh
cd ng-comic-book
```
3. Install NPM packages.
```sh
npm install
```
## Usage
You can use following commands to do various task with the project.
```sh
npm start # start development server
npm run test # run test suits
npm run build # build for production
```
> Take a look at the other scripts in [`package.json`](./package.json)
## Development
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.
## Testing
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Building
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Deployment (Firebase)
A GitHub Action will automatically deploy the project to Firebase on every push.
> See the details in [.github/workflows/firebase.yml](./.github/workflows/firebase.yml)
1. Create a [Firebase](https://firebase.google.com/) account.
2. Install the `firebase-cli` globally.
```sh
npm install -g firebase-tools
```
3. Initialize new Firebase project inside your project folder.
```sh
firebase init
# Configure files for Firebase Hosting and (optionally) st up GitHub Action deploys
# ? What do you want to use as your public directory? dist
# ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
# ? Set up automatic builds and deploys with GitHub? Yes
# ? File dist/index.html already exists. Overwrite? No
# ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) webceyhan/vue-splendid-food
# ? Set up the workflow to run a build script before every deploy? Yes
```
> This will create a new application on Firebase cloud, a firebase.json configuration for hosting and a GitHub Action for deployment, inside your project folder.
> It also generates the required secrets in your GitHub repository as follows;
```yaml
FIREBASE_SERVICE_ACCOUNT_COMIC_BOOK_95862
```
## References
- [Node.js](https://nodejs.dev/)
- [Angular](https://angular.io/)
- [Bootstrap](https://getbootstrap.com)
- [TypeScript](https://www.typescriptlang.org)
- [Firestore](https://firebase.google.com/products/firestore)
- [GitHub Actions](https://docs.github.com/en/actions)
- [Firebase](https://firebase.google.com/)
- [action-hosting-deploy](https://github.com/FirebaseExtended/action-hosting-deploy)