{"id":18867896,"url":"https://github.com/izmjs/devtools-editor","last_synced_at":"2025-04-14T14:31:41.842Z","repository":{"id":36075604,"uuid":"202616553","full_name":"izmjs/devtools-editor","owner":"izmjs","description":"Fontend part of IZM.js devtools","archived":false,"fork":false,"pushed_at":"2022-06-02T23:31:52.000Z","size":6724,"stargazers_count":6,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-03-28T03:51:11.571Z","etag":null,"topics":["angular","cypress","dashbaord","docker-image","izmjs","rxjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/izmjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-15T21:55:54.000Z","updated_at":"2021-12-04T10:33:06.000Z","dependencies_parsed_at":"2022-09-03T11:01:51.713Z","dependency_job_id":null,"html_url":"https://github.com/izmjs/devtools-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izmjs%2Fdevtools-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izmjs%2Fdevtools-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izmjs%2Fdevtools-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izmjs%2Fdevtools-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/izmjs","download_url":"https://codeload.github.com/izmjs/devtools-editor/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248897193,"owners_count":21179554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","cypress","dashbaord","docker-image","izmjs","rxjs"],"created_at":"2024-11-08T05:11:47.772Z","updated_at":"2025-04-14T14:31:39.233Z","avatar_url":"https://github.com/izmjs.png","language":"TypeScript","readme":"# Devtools\n\n## Table of Content\n\n  * [Getting Started](#getting-started)\n  * [Useful Commands](#useful-commands)\n  * [Learning Materials](#learning-materials)\n  * [Features](#features)\n  * [Stack](#stack)\n  * [Contributors Guide](https://gitlab.com/moidrissi/devtools/blob/develop/CONTRIBUTING.md)\n\n\n## Getting started\n```bash\ngit clone https://gitlab.com/moidrissi/devtools.git\ncd devtools\nnpm install\nnpm start\n```\n\n## Useful Commands\n  * `npm start` - starts a dev server and opens browser with running app\n  * `npm run test` - runs lint and tests\n  * `npm run watch` - runs tests in watch mode\n  * `npm run cy:open` - opens the Cypress Test Runner in interactive mode\n  * `npm run cy:run` - runs Cypress tests via the cli\n  * `npm run prod` - runs full prod build and serves prod bundle\n  * `npm run prettier` - runs prettier to format whole code base (`.ts` and `.scss`) \n  * `npm run analyze` - runs full prod build and `webpack-bundle-analyzer` to visualize how much code is shipped (dependencies \u0026 application) \n  * `npm run compodoc` - runs [Compodoc](https://compodoc.app) to generate a static documentation of the application \n\n\n## Run Inside Docker Container\n  * `docker build -t material-starter .` - builds docker image with name `material-starter`\n  * `docker run -it \\\n   -v ${PWD}:/usr/src/app \\\n   -v /usr/src/app/node_modules \\\n   -p 4200:4200 \\\n   --rm \\\n   material-starter` - starts `material-starter` container (you can access running application browsing http://localhost:4200) \n\n### Serving a Docker image\nWhen you are ready to serve your application the process has been made simple through the use of `Production.Dockerfile` and `Production.docker-compose.yml`.\n\nFrom 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.\n\nNpm scripts are also available to save having to write such a long command.\n\n#### Npm Scripts\n\nThe following npm scripts correspond to the docker-compose commands.\n\n| Npm Script       | Docker Compose       |\n|------------------|----------------------|\n| docker:prod      | docker-compose build |\n| docker:prod-up   | docker-compose up    |\n| docker:prod-down | docker-compose down  |\n\n#### Continuous Integration\nStarter project is using [Travis CI](https://travis-ci.org/) for running linters and tests on every commit.\nBased on your preferences and needs you can either:\n\n  * not use / use other CI server and delete both `.travis.yml` and `.travis-deploy.sh`\n  * 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) \n    with `GH_REF` and `GH_TOKEN` environment variables for automatic deployment of releases to Github Pages\n  \n\n## Learning Materials\nArticles with content that explains various approaches used to build this starter project.\n\n  * [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\n  * [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\n  * [Blog post about Typescript tips for Ngrx reducer code](https://medium.com/@tomastrajan/object-assign-vs-object-spread-in-angular-ngrx-reducers-3d62ecb4a4b0)\n  * [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)\n  * [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)\n  * [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)\n  * [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)\n  * [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)\n  * [Blog post about Angular 6+ DI with providedIn](https://medium.com/@tomastrajan/total-guide-to-angular-6-dependency-injection-providedin-vs-providers-85b7a347b59f)\n\n#### Theming \n\n  * [Blog post](https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1)\n  * [Presentation (Slides)](http://slides.com/tomastrajan/angular-material-themes-guide#/)\n  * [Live coding Video Tutorial](https://www.youtube.com/watch?v=PsgZjFTAleI)\n  * [Meetup Presentation \u0026 Live coding Video](https://www.youtube.com/watch?v=7auj9RfCNrE)\n\n \n## Features\n\n* custom themes support (4 themes included)\n* lazy-loading of feature modules\n* lazy reducers\n* localStorage ui state persistence\n* `@ngrx/effects` for API requests\n* fully responsive design\n* angular-material and custom components in `SharedModule`\n* Cypress for end to end tests\n* `Production.Dockerfile` for quick and easy serving of your app\n \n## Stack\n\n* Angular\n* ngrx\n* Angular Material\n* Bootstrap 4 (only reset, utils and grids)\n\n## Troubleshooting\n\n* **Blocking at emitting LicenseWebpackPlugin when npm start** - try using [cnpm](https://github.com/cnpm/cnpm) instead of npm\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fizmjs%2Fdevtools-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fizmjs%2Fdevtools-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fizmjs%2Fdevtools-editor/lists"}