DEV Community

Cover image for ๐Ÿš€ Angular 13 + ESLint, Material + Transloco + Jest, TestCafe + Docker + Prettier ๐Ÿš€
wlucha
wlucha

Posted on • Updated on

๐Ÿš€ Angular 13 + ESLint, Material + Transloco + Jest, TestCafe + Docker + Prettier ๐Ÿš€

This is the Angular 13 Starter project you are looking for!

GitHub
https://github.com/wlucha/angular-starter

Features

โœ… Angular 13
โœ… Angular Material
โœ… Unit Testing with Jest
โœ… End-to-End Testing with TestCafรฉ
โœ… Internationalization with Transloco
โœ… Auto documentation with Compodoc
โœ… Analyse your project with webpack-bundle-analyzer
โœ… Docker
โœ… ESLint
โœ… Prettier
โœ… Commit Linting

Demo

StackBlitz Demo

Install / Development

# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200
Enter fullscreen mode Exit fullscreen mode

Docker Deployment

# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter
Enter fullscreen mode Exit fullscreen mode

Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

Commands

  • npm run start - start the app
  • npm run lint - lint the project
  • npm run test - run unit tests
  • npm run build - build the project
  • npm run build:prod - build the project in production mode
  • npm run build:prod:stats - build the project in product mode with stats
  • npm run analyse - analyse bundle with webpack-bundle-analyzer
  • npm run compodoc - generate compodoc documentation
  • npm run changelog - generate changelog
  • npm run prettier - format the whole project

GitHub
https://github.com/wlucha/angular-starter

Top comments (2)

Collapse
 
sachitsac profile image
Sachit

Looks really good :)
Just one suggestion ( but its not my suggestion, something i came across ), to use source-map-explorer instead of webpack-bundle-analyzer.

See reasons in this thread:

stackoverflow.com/questions/465677...

Collapse
 
wlucha profile image
wlucha

Thanks! The project is now using source-map-explorer instead of webpack-bundle-analyzer.