Skip to content

izmjs/devtools-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Devtools

Table of Content

Getting started

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

Theming

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 instead of npm