๐
ฐ๏ธ ๐ฆธ Production-ready template for Progressive Web Applications implemented with Angular, TailwindCSS, Transloco, ngx-isr, etc.
โน๏ธ About โข ๐ Features โข ๐ค Contributing โข ๐ฃ๏ธ Roadmap โข ๐ฏ Credits โข ๐ฉ License
The main goal of this project is to provide a base template for the generation of a production-ready web application made with Angular
. The idea is to avoid having to configure all the tools involved in a project every time it is started and thus be able to focus on the definition and implementation of the business logic.
๐ฃ This is an opinionated template. The architecture of the code base and the configuration of the different tools used has been based on best practices and personal preferences.
-
Start project in development mode:
npm run start:dev
-
Start project in production mode:
npm run start:prod
- Angular: Angular is a platform for building mobile and desktop web applications.
- Angular Universal: Server-side rendering (SSR) with Angular Universal.
- TailwindCSS: A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
- ng-lazyload-image: A super small libary for lazy loading images for Angular apps with zero dependencies
- ngx-isr: Incremental Static Regeneration (ISR) enables developers and content editors to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.
- i18n using Transloco
- Unit tests using Jest
- e2e tests using Cypress
- Spell check
- Linting with ESLint
- Formatting with Prettier
- Stylelint: A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- HTMLHint: A linter for HTML that helps you avoid errors and enforce conventions in your HTML.
- Commit messages must meet conventional commits format
- Git hooks with Husky and lint-staged
- Containerised using Docker and Docker Compose
- GitHub Actions
- Makefile as project entrypoint
- A lot of emojis ๐ธ
angular-skeleton/
โโโ .github/
โโโ .husky/
โโโ .vscode/
โโโ cypress/
โ โโโ e2e/
โ โโโ fixtures/
โ โโโ support/
โ โโโ coverage.webpack.js
โ โโโ tsconfig.json
โโโ docker/
โโโ src/
โ โโโ app/
โ โ โโโ core/
โ โ โ โโโ components/
โ โ โ โโโ constants/
โ โ โ โโโ enums/
โ โ โ โโโ guards/
โ โ โ โโโ handlers/
โ โ โ โโโ interceptors/
โ โ โ โโโ loaders/
โ โ โ โโโ models/
โ โ โ โโโ resolvers/
โ โ โ โโโ services/
โ โ โ โโโ strategies/
โ โ โ โโโ tokens/
โ โ โ โโโ utils/
โ โ โ โโโ ...
โ โ โ โโโ core.module.ts
โ โ โโโ features
โ โ โ โโโ feature-a
โ โ โ โ โโโ components/
โ โ โ โ โโโ models/
โ โ โ โ โโโ pages/
โ โ โ โ โโโ services/
โ โ โ โ โโโ ...
โ โ โ โ โโโ home-routing.module.ts
โ โ โ โ โโโ home.module.ts
โ โ โ โโโ feature-b
โ โ โ โโโ ...
โ โ โโโ shared/
โ โ โ โโโ components/
โ โ โ โโโ directives/
โ โ โ โโโ modules/
โ โ โ โโโ pipes/
โ โ โ โโโ services/
โ โ โ โโโ shared.module.ts
โ โ โโโ app-routing.module.ts
โ โ โโโ app.browser.module.ts
โ โ โโโ app.component.html
โ โ โโโ app.component.scss
โ โ โโโ app.component.ts
โ โ โโโ app.module.ts
โ โ โโโ app.server.module.ts
โ โโโ assets/
โ โ โโโ i18n/
โ โ โโโ icons/
โ โ โโโ images/
โ โโโ environments/
โ โโโ styles/
โ โ โโโ abstracts/
โ โ โโโ base/
โ โ โโโ components/
โ โ โโโ layout/
โ โ โโโ vendors/
โ โ โโโ main.scss
โ โโโ types/
โ โโโ favicon.ico
โ โโโ favicon.png
โ โโโ index.html
โ โโโ jest.mocks.ts
โ โโโ jest.setup.ts
โ โโโ main.browser.ts
โ โโโ main.server.ts
โ โโโ manifest.webmanifest
โ โโโ polyfills.ts
โ โโโ robots.txt
โ โโโ styles.scss
โโโ .browserslistrc
โโโ .commitlintrc.js
โโโ .cspell.json
โโโ .czrc
โโโ .dockerignore
โโโ .editorconfig
โโโ .env
โโโ .eslintcache
โโโ .eslintignore
โโโ .eslintrc.js
โโโ .gitignore
โโโ .htmlhintrc
โโโ .lintstagedrc.js
โโโ .ncurc.js
โโโ .npmignore
โโโ .prettierignore
โโโ .prettierrc.js
โโโ .stylelintcache
โโโ .stylelintignore
โโโ .tool-versions
โโโ .versionrc.js
โโโ CHANGELOG.md
โโโ LICENSE
โโโ Makefile
โโโ README.md
โโโ TODO.md
โโโ angular.json
โโโ cypress.config.ts
โโโ jest.config.js
โโโ ngsw-config.json
โโโ nyc.config.js
โโโ package-lock.json
โโโ package.json
โโโ routes.txt
โโโ server.ts
โโโ stylelint.config.js
โโโ tailwind.config.js
โโโ transloco.config.js
โโโ tsconfig.app.json
โโโ tsconfig.json
โโโ tsconfig.server.json
โโโ tsconfig.spec.json
โ ๏ธ This section has yet to be fully documented.
- Prettier
- ESLint
- Stylelint
- HTMLHint
- commitlint
Barrel files are used to organize exports. This significantly reduces the size of the import blocks.
โ ๏ธ This section has yet to be fully documented.
- Flexbox layout
- TailwindCSS
- Dark theme
- Styles (SCSS) folder structure
โ ๏ธ This section has yet to be fully documented.
- Transloco
- Route language prefixing
โ ๏ธ This section has yet to be fully documented.
- Angular Universal
- Domino
- ngx-isr
โ ๏ธ This section has yet to be fully documented.
- Angular Universal
โ ๏ธ This section has yet to be fully documented.
- CustomPageTitleStrategy
โ ๏ธ This section has yet to be fully documented.
- Service Worker configuration
- Stale while revalidate strategy
- Offline support
โ ๏ธ This section has yet to be fully documented.
- ng-lazyload-image
โ ๏ธ This section has yet to be fully documented.
- NoPreloading (default)
- PreloadAllModules
- CustomRoutePreloadStrategy
- NetworkAwareRoutePreloadingStrategy
- HoverPreloadStrategy
- QuicklinkStrategy
- RouteReuseStrategy
โ ๏ธ This section has yet to be fully documented.
โ ๏ธ This section has yet to be fully documented.
- Jest
- jest-extended
- Cypress
The main actions on this project are managed using a Makefile as an entrypoint.
Usage: make TARGET [ARGUMENTS]
Targets:
build/csr Build csr image
build/ssr Build ssr image
clean/csr Clean CSR application
clean/ssr Clean SSR application
help Show this help
start/csr Start application in Client Side Rendering mode
start/ssr Start application in Server Side Rendering mode
stop/csr Stop application in Client Side Rendering mode
stop/ssr Stop application in Server Side Rendering mode
package.json scripts:
...
"scripts": {
"start:dev": "ng serve --configuration development --port 4200 --open",
"start:prod": "ng serve --configuration production --port 4300 --open",
"start:ssr:dev": "ng run angular-skeleton:serve-ssr:development --port 4201 --open",
"start:ssr:prod": "ng run angular-skeleton:serve-ssr:production --port 4301 --open",
"build:dev": "rimraf dist && ng build --configuration development",
"build:prod": "rimraf dist && ng build --configuration production && npm run build:optimize",
"build:ssr:dev": "rimraf dist && ng build --configuration development && ng run angular-skeleton:server:development",
"build:ssr:prod": "rimraf dist && ng build --configuration production && ng run angular-skeleton:server:production && npm run build:optimize",
"build:prerender:dev": "rimraf dist && ng run angular-skeleton:prerender:development",
"build:prerender:prod": "rimraf dist && ng run angular-skeleton:prerender:production && npm run build:optimize",
"build:optimize": "run-s optimize:* && ngsw-config dist/browser ./ngsw-config.json",
"optimize:i18n": "transloco-optimize dist/browser/assets/i18n",
"serve:pwa": "http-server -p 4400 -P http://localhost:4400? dist/browser -o",
"serve:ssr": "node dist/server/main.js",
"i18n:extract": "transloco-keys-manager extract",
"i18n:find": "transloco-keys-manager find",
"check:types": "tsc --pretty --noEmit && tsc --project cypress/tsconfig.json --pretty --noEmit",
"check:format": "prettier --check .",
"check:lint": "eslint . --ext .js,.ts --color",
"check:html": "htmlhint .",
"check:scss": "stylelint 'src/**/*.{css,scss}' --color",
"check:spelling": "cspell --config=.cspell.json \"{README.md,TODO.md,.github/*.md,src/**/*.ts,src/**/*.json}\"",
"check:i18n": "transloco-validator src/assets/i18n/*.json src/assets/i18n/**/*.json",
"check:staged": "lint-staged",
"fix:format": "prettier --check --write --ignore-unknown .",
"fix:lint": "npm run check:lint -- --fix",
"fix:scss": "npm run check:scss -- --fix",
"test": "cross-env NODE_ENV=test jest --verbose --colors --runInBand",
"test:spec": "npm run test -- --testPathPattern=spec",
"test:unit": "npm run test -- --testPathPattern=unit",
"test:int": "npm run test -- --testPathPattern=integration",
"e2e": "ng e2e",
"e2e:run": "ng run angular-skeleton:cypress-run",
"e2e:open": "ng run angular-skeleton:cypress-open",
"e2e:coverage:view": "http-server -p 9004 ./coverage-e2e/lcov-report -o",
"test:watch": "npm run test -- --watch",
"test:coverage": "npm run test -- --coverage --silent",
"test:coverage:view": "http-server -p 9003 ./coverage/lcov-report -o",
"reset-hard": "git clean -dfx && git reset --hard && npm install",
"version": "standard-version -t",
"prepare-release": "run-s reset-hard version",
"commit": "cz",
"update-deps": "npm-check-updates -u",
"prepare": "husky install"
},
...
Just fork and open a pull request. All contributions are welcome ๐ค
Please, check TODO for the current roadmap.
To implement this project I have based myself on many similar projects. There were countless of them and I gave them all a star.
๐ Thank you very much for these wonderful creations.