Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/izmjs/devtools-editor

Fontend part of IZM.js devtools
https://github.com/izmjs/devtools-editor

angular cypress dashbaord docker-image izmjs rxjs

Last synced: about 2 hours ago
JSON representation

Fontend part of IZM.js devtools

Awesome Lists containing this project

README 

        
# Devtools



## Table of Content



  * [Getting Started](#getting-started)

  * [Useful Commands](#useful-commands)

  * [Learning Materials](#learning-materials)

  * [Features](#features)

  * [Stack](#stack)

  * [Contributors Guide](https://gitlab.com/moidrissi/devtools/blob/develop/CONTRIBUTING.md)



## Getting started

```bash

git clone https://gitlab.com/moidrissi/devtools.git

cd devtools

npm install

npm start

```



## Useful Commands

  * `npm start` - starts a dev server and opens browser with running app

  * `npm run test` - runs lint and tests

  * `npm run watch` - runs tests in watch mode

  * `npm run cy:open` - opens the Cypress Test Runner in interactive mode

  * `npm run cy:run` - runs Cypress tests via the cli

  * `npm run prod` - runs full prod build and serves prod bundle

  * `npm run prettier` - runs prettier to format whole code base (`.ts` and `.scss`) 

  * `npm run analyze` - runs full prod build and `webpack-bundle-analyzer` to visualize how much code is shipped (dependencies & application) 

  * `npm run compodoc` - runs [Compodoc](https://compodoc.app) to generate a static documentation of the application 



## Run Inside Docker Container

  * `docker build -t material-starter .` - builds docker image with name `material-starter`

  * `docker run -it \

   -v ${PWD}:/usr/src/app \

   -v /usr/src/app/node_modules \

   -p 4200:4200 \

   --rm \

   material-starter` - starts `material-starter` container (you can access running application browsing http://localhost:4200) 



### Serving a Docker image

When you are ready to serve your application the process has been made simple through the use of `Production.Dockerfile` and `Production.docker-compose.yml`.



From the root directory of the project simply run `docker-compose -f Production.docker-compose.yml build`. After this has run you can test your image locally by running `docker-compose -f Production.docker-compose.yml up`. Run `docker-compose -f Production.docker-compose.yml down` once you are done looking over the website so that docker cleans up all the resources related to it.



Npm scripts are also available to save having to write such a long command.



#### Npm Scripts



The following npm scripts correspond to the docker-compose commands.



| Npm Script       | Docker Compose       |

|------------------|----------------------|

| docker:prod      | docker-compose build |

| docker:prod-up   | docker-compose up    |

| docker:prod-down | docker-compose down  |



#### Continuous Integration

Starter project is using [Travis CI](https://travis-ci.org/) for running linters and tests on every commit.

Based on your preferences and needs you can either:



  * not use / use other CI server and delete both `.travis.yml` and `.travis-deploy.sh`

  * create Travis CI account and link it to your projects Github repo and [configure build](https://medium.com/@tomastrajan/continuous-deployment-of-client-side-apps-with-github-pages-travis-ci-10e9d641a889) 

    with `GH_REF` and `GH_TOKEN` environment variables for automatic deployment of releases to Github Pages

  



## Learning Materials

Articles with content that explains various approaches used to build this starter project.



  * [Blog post about Best subscribing to RxJS Observable data by Components](https://medium.com/@tomastrajan/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8c0c794): subscribe() vs | async pipe

  * [Blog post about Best Practices for Angular CLI](https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81) used in this starter project

  * [Blog post about Typescript tips for Ngrx reducer code](https://medium.com/@tomastrajan/object-assign-vs-object-spread-in-angular-ngrx-reducers-3d62ecb4a4b0)

  * [Blog post about building responsive layouts with Bootstrap 4 in Angular apps](https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b)

  * [Blog post about configuration of animations during runtime](https://medium.com/tomastrajan/total-guide-to-dynamic-angular-animations-that-can-be-toggled-at-runtime-be5bb6778a0a)

  * [Blog post about unit testing of components with NgRx TestStore](https://medium.com/@tomastrajan/how-to-unit-test-angular-components-with-fake-ngrx-teststore-f0500cc5fc26)

  * [Blog post about Angular CLI budgets](https://medium.com/@tomastrajan/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a)

  * [Blog post about the best way to unsubscribe RxJs streams](https://medium.com/@tomastrajan/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0)

  * [Blog post about Angular 6+ DI with providedIn](https://medium.com/@tomastrajan/total-guide-to-angular-6-dependency-injection-providedin-vs-providers-85b7a347b59f)



#### Theming 



  * [Blog post](https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1)

  * [Presentation (Slides)](http://slides.com/tomastrajan/angular-material-themes-guide#/)

  * [Live coding Video Tutorial](https://www.youtube.com/watch?v=PsgZjFTAleI)

  * [Meetup Presentation & Live coding Video](https://www.youtube.com/watch?v=7auj9RfCNrE)



 

## Features



* custom themes support (4 themes included)

* lazy-loading of feature modules

* lazy reducers

* localStorage ui state persistence

* `@ngrx/effects` for API requests

* fully responsive design

* angular-material and custom components in `SharedModule`

* Cypress for end to end tests

* `Production.Dockerfile` for quick and easy serving of your app

 

## Stack



* Angular

* ngrx

* Angular Material

* Bootstrap 4 (only reset, utils and grids)



## Troubleshooting



* **Blocking at emitting LicenseWebpackPlugin when npm start** - try using [cnpm](https://github.com/cnpm/cnpm) instead of npm