jmaclean/nodejs-angular-heroes repository overview

⁠

⁠

⁠

⁠Angular Example App

Example app with Angular 8 + Angular CLI + Angular Universal + i18n + Firebase

:clap::clap::tada::tada::tada::tada::clap::clap:

Base project made with much :heart:. Contains CRUD, patterns, generated library, and much more!

LIVE DEMO⁠
⁠

Report bug⁠ · Request feature⁠

⁠Credits

This project is copied from angular8⁠ and all credits for the content will go to the ones that deserved them :-)

⁠Overview

This project will be used to develop and test CICD pipelines for OpenShift, Kubernetes, AWS, and other cloud platforms.

⁠Usage

⁠Development

The first section of the docker-compose.yml describes the development configuration. It runs node. The application should be developed from within the container to avoid any external dependencies.

docker-compose up
docker exec -ti nodejs-angular-heroes bash
cd /app
npm install
npm test
npm start

export CHROME_BIN=/app/node_modules/node_modules/chromium

http://localhost:4200⁠

⁠Production

The first section of the docker-compose.yml describes how the CICD pipeline would build and test the application and make it ready for production. The application will eventually run on bare nginx only.

⁠Original README from the source project

Files changed from the original project:

• README.md
• Dockerfile
• Dockerfile.dev
• docker-compose.yml
• package.json
  • added --host 0.0.0.0 --port 4200 to start to be able to expose port
  • added devDependencies
    • "chromium": "2.1.1",
    • "protractor": "5.4.3", -> to be aligned with chrome 80 in Dockerfile:apt-get
• protractor.conf.js
• search/replace -> 3f51bxxxx5/3179be;
• src/i18n/messages.en.xlf -> logo
• src/app/shared/components/header/header.component.html -> logo

⁠Table of contents

• Credits⁠
• Overview⁠
• Usage⁠
  • Development⁠
  • Production⁠
• Original README from the source project⁠
  • Table of contents⁠
  • Status⁠
  • What's included⁠
    • Angular Ivy⁠
    • Angular Universal and i18n⁠
    • Firebase⁠
  • Travis CI⁠
  • Quick start⁠
  • Bugs and feature requests⁠
  • Contributing⁠
  • Creators⁠
  • Thanks⁠
  • Copyright and license⁠

⁠Status

⁠What's included

• CRUD: create, update and remove heroes with Firebase
• Angular Universal (SSR)
• Use of preboot⁠ module to share state between browser and server
• Security Headers using helmet⁠. Report here⁠.
• Internationalization with the official i18n. Separated builds for english and spanish.
• Lazy loading modules
• Service Workers enabled!
• Example of Angular Resolver for Hero Detail
• More logical directory structure (from here⁠)
• Basic example library
• Following the best practices⁠!
• Search bar, to look for heroes
• Custom loading page
• Lazy loading images with ng-lazyload-image⁠
• Modal and toasts (snakbar)!
• Scroll restoration and anchor examples
• Responsive layout (flex layout module)
• SASS (most common used functions and mixins) and BEM styles
• Animations with ng-animate⁠
• Angular Pipes
• Interceptors and Events (Progress bar active, if a request is pending)
• Scroll to first invalid input in forms. (ngx-scroll-to-first-invalid⁠)
• Modernizr (browser features detection)
• Browser filter (Bowser) because of IE ^^
• Sentry⁠! (logs every error in the app)
• Google Tag Manager
• ES6 Promises and Observables
• Unit tests with Jasmine and Karma including code coverage. Use of ng-bullet⁠, karma-mocha-reporter⁠ and ng-mocks⁠
• End-to-end tests with Protractor

⁠Angular Ivy

This project is using version 8 of angular but Ivy is not enabled. I'm trying to do it, but some errors appear during this process. I would accept any pull request about this because no one till now knows what to do...

⁠Angular Universal and i18n

This project is deployed in firebase using Angular Universal and the official i18n. You can navigate through every language and reload (and share) every page in the application without losing context. This is very useful for SEO purposes and you almost have a ready for production app. If you want to translate the messages you can use this awesome tool, Tiny Translator⁠ or follow this tutorial⁠.

I've created a medium post where you can find a tutorial to apply this concepts to your own project. Check it here⁠, and let me know what do you think.

⁠Firebase

This repo is using Firebase. We use Cloud Firestore and Cloud Storage to handle CRUD operations over the heroes and to store their images. Also Hosting and Functions to deploy the app with Universal.

⁠Travis CI

We use Travis CI to run this tasks in order:

• Linter
• Unit tests
• End to end tests
• Build for production of browser and server
• Validate that server generated using curl
• Sonar
• Deploy to Firebase

⁠Quick start

WARNING

npm i
npm start

⁠Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines⁠ and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue⁠.

⁠Contributing

Please read through our contributing guidelines⁠. Included are directions for opening issues, coding standards, and notes on development.

Moreover, all HTML and CSS should conform to the Code Guide⁠, maintained by Ismael Ramos⁠.

Editor preferences are available in the editor config⁠ for easy use in common text editors. Read more and download plugins at https://editorconfig.org/⁠.

⁠Creators

Ismael Ramos

• https://github.com/ismaestro⁠

⁠Thanks

Thanks to all contributors and their support.

If you have an idea or you want to do something, tell me or just do it! I'm always happy to hear your feedback!

⁠Copyright and license

Code and documentation copyright 2018 the authors. Code released under the MIT License⁠.

Enjoy :metal: