Skip to content
Angular 8 Example App + Angular CLI + Angular Universal + i18n + Firebase
Branch: master
Clone or download
Latest commit e4266b4 Jun 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Mar 11, 2019
e2e feat(code): reformat code Jun 20, 2019
functions feat(universal): add preboot module to share state between browser an… Jun 24, 2019
projects/ngx-example-library feat(code): reformat code Jun 20, 2019
scripts fix(travis): install functions dependencies 2 😄 Jun 19, 2019
src feat(hero service): improve unit tests Jun 25, 2019
.dockerignore added dockerignore Apr 10, 2019
.editorconfig feat(layout): update ts config files and more layout changes Jun 13, 2019
.gitignore WIP Mar 4, 2019
.travis.yml feat(coveralls): remove coveralls and codacy budgets Jun 20, 2019
CHANGELOG.md chore(release): 8.0.0 Jun 12, 2019
CONTRIBUTING.md Create CONTRIBUTING.md Jul 12, 2017
Dockerfile Update dockerfile name project Apr 14, 2019
LICENSE feat(style guide): added app config and removed unused files and pack… Jan 4, 2017
README.md feat(readme): update readme image Jun 25, 2019
angular.json feat(lazy images): replace ngx-progressive-image-loader for ng-lazylo… Jun 20, 2019
browserslist feat(layout): update ts config files and more layout changes Jun 13, 2019
extra-webpack.config.js feat(moment): remove useless locales from dist files Jun 12, 2019
firebase.json feat(code): reformat code Jun 20, 2019
karma.conf.js feat(coverage): fix coverage path and sonar issues Jun 20, 2019
package-lock.json feat(universal): add preboot module to share state between browser an… Jun 24, 2019
package.json feat(universal): add preboot module to share state between browser an… Jun 24, 2019
server.ts feat(universal): add preboot module to share state between browser an… Jun 24, 2019
server.tsconfig.json feat(layout): update ts config files and more layout changes Jun 13, 2019
sonar-project.properties feat(universal): add preboot module to share state between browser an… Jun 24, 2019
tsconfig.browser.json feat(layout): update ts config files and more layout changes Jun 13, 2019
tsconfig.json feat(layout): update ts config files and more layout changes Jun 13, 2019
tsconfig.server.json feat(layout): update ts config files and more layout changes Jun 13, 2019
tsconfig.spec.json feat(layout): update ts config files and more layout changes Jun 13, 2019
tslint.json feat(layout): update ts config files and more layout changes Jun 13, 2019

README.md

Logo

Angular Example App

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

👏👏🎉🎉🎉🎉👏👏

Base project made with much ❤️. Contains CRUD, patterns, generated library, and much more!

LIVE DEMO
Demo example

Report bug · Request feature

Table of contents

Status

travis Quality Gate Status Coverage dependency Status devDependency Status peerDependencies Status npm

GitHub stars GitHub forks

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
  • 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

Verify that you are running node 10.16.0 by running node -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

npm i
npm start
Tasks Description
npm start Start the app in development mode with the english language only
npm start:es Start the app in development mode with the spanish language only
start:ssr Start the server like SSR
extract-i18n Extract all messages from templates and ts files and update the language files with new translations
npm run lint Run the linter (tslint)
npm run test Run all unit tests with karma and jasmine
npm run test:app:watch Run app unit tests and wait for changes
npm run test:library:watch Run library unit tests and wait for changes
npm run e2e Run end to end tests with protractor
npm run build:prod:en Build the app for production with english translations
npm run build:prod:es Build the app for production with spanish translations
npm run build:server:prod Build the server version for production
npm run compile:server Compiles the server with webpack
npm run build:ssr Complete task with all the build subtasks for SSR
npm run build:library Build the library
npm run serve:ssr Start the node server for angular universal
npm run validate:server Script that validate if server generated previously starts without error
npm run bundle-report Build and run webpack-bundle-analyzer over stats json
npm run release:minor Create a new minor release using standard-version
npm run release:major Create a new major release using standard-version
npm run ci Execute linter, tests and production builds
npm run deploy Build the app and deploy it to firebase hosting

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

Buy Me A Coffee

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 🤘

You can’t perform that action at this time.