git clone https://gitlab.com/moidrissi/devtools.git
cd devtools
npm install
npm start
npm start
- starts a dev server and opens browser with running appnpm run test
- runs lint and testsnpm run watch
- runs tests in watch modenpm run cy:open
- opens the Cypress Test Runner in interactive modenpm run cy:run
- runs Cypress tests via the clinpm run prod
- runs full prod build and serves prod bundlenpm run prettier
- runs prettier to format whole code base (.ts
and.scss
)npm run analyze
- runs full prod build andwebpack-bundle-analyzer
to visualize how much code is shipped (dependencies & application)npm run compodoc
- runs Compodoc to generate a static documentation of the application
docker build -t material-starter .
- builds docker image with namematerial-starter
docker run -it \ -v ${PWD}:/usr/src/app \ -v /usr/src/app/node_modules \ -p 4200:4200 \ --rm \ material-starter
- startsmaterial-starter
container (you can access running application browsing http://localhost:4200)
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.
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 |
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
andGH_TOKEN
environment variables for automatic deployment of releases to Github Pages
Articles with content that explains various approaches used to build this starter project.
- Blog post about Best subscribing to RxJS Observable data by Components: subscribe() vs | async pipe
- Blog post about Best Practices for Angular CLI used in this starter project
- Blog post about Typescript tips for Ngrx reducer code
- Blog post about building responsive layouts with Bootstrap 4 in Angular apps
- Blog post about configuration of animations during runtime
- Blog post about unit testing of components with NgRx TestStore
- Blog post about Angular CLI budgets
- Blog post about the best way to unsubscribe RxJs streams
- Blog post about Angular 6+ DI with providedIn
- 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
- Angular
- ngrx
- Angular Material
- Bootstrap 4 (only reset, utils and grids)
- Blocking at emitting LicenseWebpackPlugin when npm start - try using cnpm instead of npm