TemplateAppAngular

Steps to create an Angular + git-commit-msg-linter + ng-lint-staged + Husky + Jest + Cypress + Coveralls + TravisCI project template

Features
Steps
References

Features

VSCode IDE Settings and Jest Snippet
tslint-angular
prettier@npm
tslint-config-prettier
git-commit-msg-linter
ng-lint-staged
husky
jest, ts-jest, jest-preset-angular, @types/jest
rimraf
npm-check
concurrently
http-server
npm-run-all
env-cmd
TravisCI
Coveralls
Cypress
snyk.io

Steps:

1. Create new Angular project

   $ ng n template-app-angular --routing=false --style=css --skip-git --verbose=true --prefix=template-app-angular

2. Disable sharing of anonymous usage

   $ cd ./template-app-angular

   $ ng analytics project off | echo N

3. Remove standard readme file

   $ rm ./README.md

4. Setup Visual Studio Code IDE settings

create .vscode/settings.json file and add:

{
  "files.eol": "\n",
  "explorer.compactFolders": false,
  "editor.tabSize": 2,
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "html.format.endWithNewline": true,
  "html.suggest.html5": true,
  "html.autoClosingTags": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.referencesCodeLens.showOnAllFunctions": true,
  "javascript.referencesCodeLens.enabled": true,
  "typescript.implementationsCodeLens.enabled": true,
  "typescript.referencesCodeLens.enabled": true,
  "typescript.referencesCodeLens.showOnAllFunctions": true
}

5. Add new entries to .gitignore

copy .gitignore file

6. Create .gitattributes file

create .gitattributes file and add:

# Auto detect text files and perform LF normalization
* text=auto

# JS and TS files must always use LF for tools to work
*.js eol=lf
*.ts eol=lf
*.json eol=lf
*.html eol=lf
*.css eol=lf
*.scss eol=lf

7. Create .npmrc file

create .npmrc file and add:

registry = "https://registry.npmjs.org/"

8. Initialize GIT Local Repo

   $ git init

9. Add GIT Local Repo settings

   $ git config core.eol lf
   $ git config core.autocrlf input
   $ git config commit.status false
   $ git config push.followTags true
   $ git config alias.s '!git status -s'
   $ git config alias.c '!git add --all && git commit -m'
   $ git config alias.l "log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %C(green)[%cd...%cr]%Creset %C(bold blue)<%an> %n%C(bold)%s%n%Creset' --abbrev-commit --date=iso-local"
   $ git config alias.lnp '!git --no-pager l'
   $ git config alias.t "!sh -c 'git tag -a $1 -m $1' -"

10. Add GPL v3 license

copy license file

11. Update project details on package.json

on package.json file, update:

{
  "name": "template-app-angular",
  "version": "0.0.0",
  "author": {
    "name": ".luizhp",
    "email": "[email protected]",
    "url": "https://github.com/luizhp/"
  },
  "description": "Angular TDD project template",
  "keywords": [
    "Angular",
    "Jest",
    "Travis-CI",
    "Coveralls",
    "Cypress",
    "snyk.io",
    "GitHub",
    "git-commit-msg-linter",
    "ng-lint-staged",
    "Husky",
    "TDD"
  ],
  "categories": ["Programming Languages", "Testing", "Linters", "Snippets"],
  "homepage": "https://github.com/luizhp/template-app-angular/tree/main#readme",
  "readme": "https://github.com/luizhp/template-app-angular/tree/main#readme",
  "icon": "https://raw.githubusercontent.com/luizhp/template-app-angular/main/src/favicon.ico",
  "bugs": {
    "url": "https://github.com/luizhp/template-app-angular/issues",
    "email": "[email protected]"
  },
  "license": "GPL-3.0-or-later",
  "repository": {
    "type": "git",
    "url": "https://github.com/luizhp/template-app-angular"
  },
  "engines": {
    "node": ">= 12",
    "npm": "^6.14.7"
  },
  ...
}

12. Initial commit

   $ git c "chore: initial commit"

13. Install tslint-angular package

tslint-angular@npm

$ npm i -D tslint-angular@latest

$ git c "chore(tslint-angular): install package"

14. Setup tslint-angular on tslint.json file

update tslint.json file with:

{
  "extends": ["tslint:recommended", "tslint-angular"],
  ...

   $ git c "chore(tslint-angular): setup tslint.json file"

15. Install prettier package

prettier@npm

$ npm i -D prettier@latest

$ git c "chore(prettier): install package"

16. Setup prettier custom options

create .prettierrc file and add:

{
  "tabWidth": 2,
  "singleQuote": true,
  "endOfLine": "lf",
  "bracketSpacing": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "useTabs": false,
  "semi": true,
  "quoteProps": "consistent",
  "jsxBracketSameLine": true
}

create .prettierignore file and add:

package-lock.json
yarn.lock
dist
coverage
node_modules
.travis.yml
CHANGELOG.md

   $ git c "chore(prettier): setup custom options"

17. Install tslint-config-prettier package

tslint-config-prettier@npm

$ npm i -D tslint-config-prettier@latest

$ git c "chore(tslint-config-prettier): install package"

18. Setup tslint-config-prettier on tslint.json file

update tslint.json file with:

{
  "extends": ["tslint:recommended", "tslint-angular", "tslint-config-prettier"],
  ...

   $ git c "chore(tslint-config-prettier): setup tslint.json file"

19. Setup Visual Studio Code IDE jest snippet

create .vscode/jest.code-snippets file and add:

{
  "Jest Test": {
    "prefix": ["test"],
    "body": [
      "describe('', () => {",
      "  test('', () => {",
      "",
      "  })",
      "})",
      ""
    ],
    "description": "A describe block for Jest"
  }
}

   $ git c "chore(vscode): add jest snippet"

20. Install git-commit-msg-linter package

git-commit-msg-linter

$ npm i -D git-commit-msg-linter@latest

$ git c "chore(git-commit-msg-linter): install package"

21. Install ng-lint-staged package

ng-lint-staged

$ npm i -D ng-lint-staged@latest

$ git c "chore(ng-lint-staged): install package"

22. Setup ng-lint-staged on .lintstagedrc file

create .lintstagedrc file and add:

{
  "lint-staged": {
    "src/**/*.ts": ["ng-lint-staged lint --fix --"]
  }
}

   $ git c "chore(ng-lint-staged): setup .lintstagedrc file"

23. Install husky package

husky

$ npm i -D husky@latest

$ git c "chore(husky): install package"

24. Add husky pre-commit hook with ng-lint-staged

create .huskyrc.json file and add:

{
  "hooks": {
    "pre-commit": "ng-lint-staged"
  }
}

   $ git c "chore(ng-lint-staged): add husky pre-commit hook"

25. Update build script

on package.json file, replace:

"scripts": {
   ...
   "build": "ng build --prod --base-href ./",
   ...
}

   $ git c "build(script): update build script"

26. Add husky pre-push hook with build script

update .huskyrc.json file adding pre-push hook:

{
  "hooks": {
    ...
    "pre-push": "npm run build"
  }
}

   $ git c "build(husky): add husky pre-push hook"

27. Install pretty-quick package

pretty-quick

   $ npm i -D pretty-quick@latest

   $ git c "chore(pretty-quick): install package"

28. Update husky pre-commit hook with pretty-quick

on .huskyrc.json file update pre-commit hook with:

{
  "hooks": {
    "pre-commit": "pretty-quick --check --staged && ng-lint-staged",
    ...
}

   $ git c "chore(pretty-quick): update husky pre-commit hook"

29. Ensure prettier applies defined format to project files

  $ npx prettier --write "**/*.{json,ts,html,js}"

  $ git c "style: ensure prettier applies defined format to project files"

30. Install commitizen package

commitizen

$ npm i -D commitizen@latest

$ git c "chore(commitizen): install package"

31. Initialize cz-conventional-changelog commitizen adapter settings

cz-conventional-changelog

$ npx commitizen init cz-conventional-changelog --save-dev --save-exact

$ git c "chore(commitizen): initialize cz-conventional-changelog adapter settings"

32. Add commit script with commitizen

on package.json file, add:

"scripts": {
   ...
   "commitizen": "exec < /dev/tty && git cz --hook || true",
   ...
}

   $ git c "chore(commitizen): add commitizen script"

33. Add husky prepare-commit-msg hook with commit script

on .huskyrc.json file add prepare-commit-msg hook with:

{
  "hooks": {
    "prepare-commit-msg": "echo '👉 Control-C 👈 abort commitizen and continue with your commit message' && npm run commitizen || true",
    ...
}

$ git c "chore(commitizen): add husky prepare-commit-msg hook with commitizen script"

Now you can choose to provide or use comitizen to assist you on building your commit message

34. Remove Karma packages and dependencies

   $ npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter

   $ git c "chore(karma): remove packages and dependencies"

35. Remove Karma configuration reference inside the angular.json file

update angular.json file:

{
 ...
 projects: {
    template-app-angular: {
       architect: {
          test: {
            options: {
              "karmaConfig": "karma.conf.js"
            }
          }
       }
    }
 }
 ...
}

   $ git c "chore(karma): remove configuration reference"

36. Remove Karma configuration file

   $ rm ./karma.conf.js

   $ git c "chore(karma): remove configuration file"

37. Install jest packages

jest
ts-jest
jest-preset-angular

@types/jest

$ npm i -D jest@latest ts-jest@latest jest-preset-angular@latest @types/jest@latest

$ git c "chore(jest): install packages"

38. Setup setup-jest.ts file

create setup-jest.ts file with:
```
import 'jest-preset-angular';
```

   $ git c "chore(jest): create setup-jest.ts file"

39. Setup jest.config.js file

create jest.config.js file and add:

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  transformIgnorePatterns: ['node_modules/(?!@ngrx|ngx-socket-io)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest',
  },
  testPathIgnorePatterns: [
    '<rootDir>/node_modules/',
    '<rootDir>/dist/',
    '<rootDir>/cypress/',
    '<rootDir>/src/test.ts',
  ],
};

   $ git c "chore(jest): setup jest.config.js file"

40. Remove unnecessary comments on tsconfig files

remove this comment from tsconfig.json file:

/* To learn more about this file see: https://angular.io/config/tsconfig. */

remove this comment from tsconfig.app.json file:

/* To learn more about this file see: https://angular.io/config/tsconfig. */

remove this comment from tsconfig.spec.json file:

/* To learn more about this file see: https://angular.io/config/tsconfig. */

   $ git c "chore(tsconfig): remove unnecessary comments on tsconfig files"

41. Setup jest on tsconfig.json file

update tsconfig.json file, adding:

{
  "compilerOptions": {
    ...
    "types": ["jest"],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true

   $ git c "chore(jest): setup tsconfig.json file"

42. Setup jest on tsconfig.spec.json file

update tsconfig.spec.json file:

{
  "compilerOptions": {
    ...
    "types": ["jest", "node"],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  ...

   $ git c "chore(jest): setup tsconfig.spec.json file"

43. Remove the test target inside the angular.json file

update angular.json file:

{
 ...
 projects: {
    template-app-angular: {
       architect: {
          test: {}
       }
    }
 }
 ...
}

   $ git c "chore(jest): remove test target"

44. Remove src/test.ts reference on tsconfig.spec.json

update tsconfig.spec.json file:
```
{
...
"files": [
  "src/test.ts",
  ...
```

   $ git c "chore(jest): remove src/test.ts reference on tsconfig.spec.json"

45. Remove previous test configuration file

   $ rm ./src/test.ts

   $ git c "chore(jest): remove previous test configuration file"

46. Add jest's test scripts

on package.json file, add:

"scripts": {
   ...
   "test": "jest --passWithNoTests --silent --noStackTrace --runInBand",
   "test:verbose": "jest --passWithNoTests --runInBand",
   "test:staged": "npm test -- --findRelatedTests",
   ...

   $ git c "chore(jest): add test scripts"

47. Setup staged files test on .lintstagedrc file

update .lintstagedrc file:

{
  "lint-staged": {
    "src/**/*.ts": ["ng-lint-staged lint --fix --", "npm run test:staged"]
  }
}

   $ git c "chore(jest): setup staged files test on .lintstagedrc file"

48. Add jest test configuration for unit tests

create jest-unit-config.js file and add:

const config = require('./jest.config');
config.testMatch = ['**/*.spec.ts'];
module.exports = config;

   $ git c "chore(jest): setup configuration for unit tests"

49. Add jest test configuration for integration tests

create jest-integration-config.js file and add:

const config = require('./jest.config');
config.testMatch = ['**/*.test.ts'];
module.exports = config;

   $ git c "chore(jest): setup configuration for integration tests"

50. Add scripts for jest unit and integration tests

on package.json file, add:

"scripts": {
   ...
   "test:unit": "npm test -- --watch -c jest-unit-config.js",
   "test:integration": "npm test -- --watch -c jest-integration-config.js",
   ...

   $ git c "chore(jest): add scripts for unit and integration tests"

51. Install coveralls package

coveralls@npm

$ npm i -D coveralls@latest

$ git c "chore(coveralls): install package"

Reference: coveralls

52. Add coverage settings at jest.config.js file

add the following lines on jest.config.js file:

module.exports = {
   ...,
   collectCoverage: true,
   coverageDirectory: "coverage/template-app-angular"
};

   $ git c "chore(jest): add coverage settings"

53. Add test:ci and test:coveralls scripts

on package.json file, add:

"scripts": {
   ...
   "test:ci": "npm test -- --coverage --watch=false --no-progress --browsers=ChromeHeadlessNoSandbox",
   "test:coveralls": "npm run test:ci && coveralls < coverage/template-app-angular/lcov.info",
   ...

   $ git c "chore(jest): add test:ci and test:coveralls scripts"

54. Add test:ci script on husky pre-push hook

update .huskyrc.json file:

{
  "hooks": {
    ...
    "pre-push": "npm run test:ci && npm run build"
  }
}

   $ git c "chore(jest): add test:ci script on husky pre-push hook"

55. Create Travis CI building and testing file

create .travis.yml file and add:

language: node_js
node_js:
  - 12

addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

cache:
  directories:
    - ~/.npm
    - ~/.cache

install:
  - npm install

script:
  - npm run lint
  - npm run test:coveralls

   $ git c "chore(travis): create building and testing file"

Reference: TravisCI

56. Remove jasmine packages

   $ npm uninstall @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter

   $ git c "chore(jasmine): remove packages"

57. Install cypress package

cypress

$ npm i -D cypress@latest

$ git c "chore(cypress): install package"

58. Create cypress configuration file

create cypress.json file and add:

{
  "baseUrl": "http://localhost:4200",
  "video": false
}

   $ git c "chore(cypress): create configuration file"

Reference: Cypress-Configuration

59. Install concurrently package

concurrently

$ npm i -D concurrently@latest

$ git c "chore(concurrently): install package"

60. Add cypress e2e scripts

on package.json file, update:

"scripts": {
   ...
   "cypress:e2e": "cypress open",
   "cypress:install": "cypress install -f",
   "cypress:run": "cypress run --record",
   "cypress:chrome": "cypress run -b chrome",
   "cypress:open": "concurrently \"ng serve\" \"cypress open\""
},
...

   $ git c "chore(cypress): add e2e scripts"

61. Remove protractor package

   $ npm uninstall protractor

   $ git c "chore(protractor): remove package"

62. Remove the e2e target inside the angular.json file

update angular.json file:

{
 ...
 projects: {
    template-app-angular: {
       architect: {
          e2e: {}
       }
    }
 }
 ...
}

   $ git c "chore(cypress): remove e2e target"

63. Remove previous e2e file entry reference on tsconfig at lint target inside the angular.json file

update angular.json file:

{
 ...
 projects: {
    template-app-angular: {
       architect: {
          lint: {
           ...
           "options": {
            "tsConfig": [
              ...
              "e2e/tsconfig.json"
              ...
}

   $ git c "chore(cypress): remove previous e2e file entry reference"

64. Remove e2e folder

   $ rm -rf ./e2e

   $ git c "chore(cypress): remove e2e folder"

65. Initialize cypress and generates payloads

after Cypress UI loads, exit it
```
$ npm run cypress:e2e
```

remove cypress examples folder or move to another place

$ rm -rf ./cypress/integration/examples

$ npx pretty-quick --fix

$ git c "chore(cypress): initialize and generates payloads"

66. Create cypress tsconfig.json file to enable intellisense

create cypress/tsconfig.json file and add:

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": ["cypress"],
    "noEmit": true
  },
  "include": ["**/*.*"]
}

   $ git c "chore(cypress): enable intellisense"

Reference: Cypress-IntelliSense

67. Update sample angular component to cypress test

on src/app/app.component.html file locate:

<span>{{ title }} app is running!</span>

and add data-cy="main-title" attribute as:

<span data-cy="main-title">{{ title }} app is running!</span>

   $ git c "test(cypress): update sample angular component"

68. Create cypress sample test file

create cypress/integration/main-page.spec.js file and add:

const MAIN_TITLE = 'template-app-angular app is running!';

describe('Main Page UI', () => {
  it('Should return true when title component was correct', () => {
    cy.visit('/');

    cy.contains(MAIN_TITLE).should('have.length', 1);
  });

  it('Should return true when title component was correctly located', () => {
    cy.visit('/');

    cy.get('[data-cy=main-title]')
      .contains(MAIN_TITLE)
      .should('have.length', 1);
  });
});

   $ git c "test(cypress): create sample test file"

69. Install http-server package

http-server

$ npm i -D http-server@latest

$ git c "chore(http-server): install package"

70. Add start:ci test script

on package.json file, add:

"scripts": {
   ...,
   "start:ci": "http-server ./dist/template-app-angular -a localhost -p 4200 -c-1"
   ...

   $ git c "chore(cypress): add start:ci test script"

71. Install npm-run-all package

npm-run-all

$ npm i -D npm-run-all@latest

$ git c "chore(npm-run-all): install package"

72. Add cypress:ci test script

on package.json file, add:

"scripts": {
   ...,
   "cypress:ci": "ng build --prod && run-p --race start:ci cypress:run"
   ...

on package.json file, update:

"scripts": {
   ...,
   "cypress:e2e": "npm run cypress:ci",
   ...

   $ git c "chore(cypress): add test scripts"

73. Call cypress:ci script on husky pre-push hook

update .huskyrc.json file:

{
  "hooks": {
    ...
    "pre-push": "npm run test:ci && npm run cypress:e2e"
  }
}

   $ git c "chore(cypress): ensure husky pre-push hook calls cypress:ci script"

74. Call cypress:ci script on Travis configuration

at script entry on .travis.yml file add:
```
- npm run cypress:ci
```

   $ git c "chore(travis): ensure cypress:ci script runs"

75. Ensure Angular destroys itself on hot reloads

replace src/main.ts file content with:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then((ref) => {
    if (window[`ngRef`]) {
      window[`ngRef`].destroy();
    }
    window[`ngRef`] = ref;
  })
  .catch((err) => console.error(err));

   $ git c "refactor(project): ensure angular destroys itself on hot reloads"

76. Install rimraf package

rimraf

$ npm i -D rimraf@latest

$ git c "chore(rimraf): install package"

77. Add prebuild script to ensure rimraf destroys the dist folder before building

on package.json file, add:

"scripts": {
   ...
   "prebuild": "rimraf dist",
   ...

   $ git c "build(script): ensure rimraf destroy the dist folder before building"

78. Install npm-check package

npm-check

$ npm install -D npm-check@latest

$ git c "chore(npm-check): install package"

79. Add npm-check script to ensure project packages to be updated

on package.json file, add:

"scripts": {
   ...
   "check": "npm-check -s -u",
   ...

   $ git c "chore(npm-check): add check script to ensure project packages to be updated"

80. Upgrade zone.js from 0.10.3 to 0.11.1

Optional

$ npm run check

$ git c "chore(zone.js): upgrade version from 0.10.3 to 0.11.1"

81. Upgrade @types/node from 12.12.62 to 14.11.2

Optional

$ npm run check

$ git c "chore(types/node): upgrade version from 12.12.62 to 14.11.2"

82. Upgrade ts-node from 8.3.0 to 9.0.0

Optional

$ npm run check

$ git c "chore(ts-node): upgrade version from 8.3.0 to 9.0.0"

83. Set up a project in the Cypress Test Runner

Create a new project after logging in to the Cypress Test Runner Setup

$ npx cypress open

# Login
# Click on the run tab
# Conect to dashboard
# Setup project (Project name, organization, project visibility)
# Copy projectId and CYPRESS_RECORD_KEY
# Exit

Ensure if automatically added the projectId on cypress.json file and commit:
```
{
  ...
  "projectId": <<YOUR ProjectId>>
  ...
}
```

   $ git c "chore(cypress): setup projectId"

84. Create .env file and add CYPRESS_RECORD_KEY environment variable

create .env file and add:

CYPRESS_RECORD_KEY=<<ENTER YOUR CYPRESS_RECORD_KEY>>

85. Install env-cmd package

env-cmd

$ npm install -D env-cmd@latest

$ git c "chore(env-cmd): install package"

86. Enable Cypress record key to be visible when cypress:e2e test script runs

on package.json file, update:

"scripts": {
   ...,
   "cypress:e2e": "env-cmd npm run cypress:ci",
   ...

   $ git c "chore(cypress): enable record key to be visible when cypress:e2e test script runs"

87. Create GIT Repo on GitHub

do not push on it yet

88. Assign Repo to cypress.io

89. Assign Repo to Coveralls

90. Assign Repo to TravisCI

91. Add CYPRESS_RECORD_KEY to TravisCI project environment variables

92. Add badges on package.json

on package.json file, add:

{
  ...
  "badges": [
    {
      "description": "Travis-CI - Build Status",
      "href": "https://travis-ci.org/luizhp/template-app-angular.svg?branch=main",
      "url": "https://travis-ci.org/luizhp/template-app-angular"
    },
    {
      "description": "Coveralls - Coverage Status",
      "href": "https://coveralls.io/repos/github/luizhp/template-app-angular/badge.svg?branch=main",
      "url": "https://coveralls.io/github/luizhp/template-app-angular?branch=main"
    },
    {
      "description": "snyk.io - Known Vulnerabilities",
      "href": "https://snyk.io/test/github/luizhp/template-app-angular/badge.svg?targetFile=package.json",
      "url": "https://snyk.io/test/github/luizhp/template-app-angular?targetFile=package.json"
    },
    {
      "description": "cypress.io",
      "href": "https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/oaq3oo/main&style=flat&logo=cypress",
      "url": "https://dashboard.cypress.io/projects/oaq3oo/runs"
    },
    {
      "description": "Prettier Code Style",
      "href": "https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square",
      "url": "https://github.com/prettier/prettier/"
    },
    {
      "description": "Commitizen friendly",
      "href": "https://img.shields.io/badge/commitizen-friendly-brightgreen.svg",
      "url": "https://commitizen.github.io/cz-cli/"
    },
    {
      "description": "GPLv3 License",
      "href": "https://img.shields.io/badge/License-GPL%20v3-yellow.svg",
      "url": "https://opensource.org/licenses/"
    },
    {
      "description": "Open Source",
      "href": "https://badges.frapsoft.com/os/v1/open-source.svg?v=103",
      "url": "https://opensource.org/"
    }
  ],
  ...
}

   $ git c "chore(project): ensure all badges are declared"

93. Install standard-version package

standard-version

$ npm i -D standard-version

$ git c "chore(standard-version): install package"

94. Setup standard-version changelog header output

on package.json file, add:

{
  ...
  "standard-version": {
      "changelogHeader": "# Template Angular TDD App\n\nAll notable changes to this project will be documented here.\n\n"
    }

   $ git c "chore(standard-version): setup changelog header output"

95. Add standard-version release script

on package.json file, add:

"scripts": {
   ...
   "release": "HUSKY_SKIP_HOOKS=1 standard-version",
   ...
}

   $ git c "chore(standard-version): add release script"

96. Set as release 0.0.1

on package.json file, update:
```
"version": "1.0.0",
```

97. Run release script as first-release

   $ npm run release -- --first-release

98. Append package.json on previous commit

   $ git add ./package.json
   $ git commit --amend --no-edit

99. Push commits to GitHub Repo

100. Assign Repo to snyk.io

References

Contributing

Contributions are always welcome! 👊

You can reach me out at Twitter @luizhp

Show your support

Give a ⭐️ if this project helped you!

License

This project is GPL v3 licensed.

Name		Name	Last commit message	Last commit date
Latest commit History 83 Commits
.vscode		.vscode
cypress		cypress
src		src
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.huskyrc.json		.huskyrc.json
.lintstagedrc		.lintstagedrc
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
README.md		README.md
angular.json		angular.json
cypress.json		cypress.json
jest-integration-config.js		jest-integration-config.js
jest-unit-config.js		jest-unit-config.js
jest.config.js		jest.config.js
license		license
package-lock.json		package-lock.json
package.json		package.json
setup-jest.ts		setup-jest.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json
tslint.json		tslint.json

License

luizhp/template-app-angular

Folders and files

Latest commit

History

Repository files navigation

TemplateAppAngular

Features

Steps:

1. Create new Angular project

2. Disable sharing of anonymous usage

3. Remove standard readme file

4. Setup Visual Studio Code IDE settings

5. Add new entries to .gitignore

6. Create .gitattributes file

7. Create .npmrc file

8. Initialize GIT Local Repo

9. Add GIT Local Repo settings

10. Add GPL v3 license

11. Update project details on package.json

12. Initial commit

13. Install tslint-angular package

14. Setup tslint-angular on tslint.json file

15. Install prettier package

16. Setup prettier custom options

17. Install tslint-config-prettier package

18. Setup tslint-config-prettier on tslint.json file

19. Setup Visual Studio Code IDE jest snippet

20. Install git-commit-msg-linter package

21. Install ng-lint-staged package

22. Setup ng-lint-staged on .lintstagedrc file

23. Install husky package

24. Add husky pre-commit hook with ng-lint-staged

25. Update build script

26. Add husky pre-push hook with build script

27. Install pretty-quick package

28. Update husky pre-commit hook with pretty-quick

29. Ensure prettier applies defined format to project files

30. Install commitizen package

31. Initialize cz-conventional-changelog commitizen adapter settings

32. Add commit script with commitizen

33. Add husky prepare-commit-msg hook with commit script

34. Remove Karma packages and dependencies

35. Remove Karma configuration reference inside the angular.json file

36. Remove Karma configuration file

37. Install jest packages

38. Setup setup-jest.ts file

39. Setup jest.config.js file

40. Remove unnecessary comments on tsconfig files

41. Setup jest on tsconfig.json file

42. Setup jest on tsconfig.spec.json file

43. Remove the test target inside the angular.json file

44. Remove src/test.ts reference on tsconfig.spec.json

45. Remove previous test configuration file

46. Add jest's test scripts

47. Setup staged files test on .lintstagedrc file

48. Add jest test configuration for unit tests

49. Add jest test configuration for integration tests

50. Add scripts for jest unit and integration tests

51. Install coveralls package

52. Add coverage settings at jest.config.js file

53. Add test:ci and test:coveralls scripts

54. Add test:ci script on husky pre-push hook

55. Create Travis CI building and testing file

56. Remove jasmine packages

57. Install cypress package

58. Create cypress configuration file

59. Install concurrently package

60. Add cypress e2e scripts

61. Remove protractor package

62. Remove the e2e target inside the angular.json file

63. Remove previous e2e file entry reference on tsconfig at lint target inside the angular.json file

64. Remove e2e folder

65. Initialize cypress and generates payloads

66. Create cypress tsconfig.json file to enable intellisense

67. Update sample angular component to cypress test

68. Create cypress sample test file

69. Install http-server package

70. Add start:ci test script

71. Install npm-run-all package

Packages