π °οΈπ¦Έ Template to start developing a Progressive Web Application with Angular, Transloco, Angular Universal, SSR/ISR, TailwindCSS, Jest, Cypress, ESLint, Prettier, Husky, etc.
MIT License
βΉοΈ 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-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.
Barrel files are used to organize exports. This significantly reduces the size of the import blocks.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
β οΈ This section has yet to be fully documented.
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.