Skip to content

Commit 046c072

Browse files
authored
Merge pull request #693 from BIX-Digital/feature/GH-692-spa-dependencies-update-incl-angular-12
Feature/gh 692 spa dependencies update incl angular 12
2 parents f324c80 + 602ab0a commit 046c072

24 files changed

+44766
-12048
lines changed

.github/workflows/codeql-analysis.yml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@ jobs:
3030

3131
# Build
3232
- name: Set up JDK 11
33-
uses: actions/setup-java@v1
33+
uses: actions/setup-java@v2
3434
with:
35-
java-version: 11
35+
distribution: 'adopt' # See 'Supported distributions' for available options
36+
java-version: '11'
3637
- run: ./gradlew clean build
3738
env:
3839
NO_NEXUS: true

.github/workflows/gradle.yml

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@ jobs:
1111
- uses: actions/checkout@v1
1212
- uses: actions/setup-node@v1
1313
with:
14-
node-version: '10.x'
15-
- name: Install yarn
16-
run: cd client && yarn install
14+
node-version: '12.x'
15+
- name: Install NPM
16+
run: cd client && npm install
1717
- name: Build provisioning-app FE
18-
run: cd client && yarn build:prod
18+
run: cd client && npm run build:prod
1919
- name: Set up JDK 11
20-
uses: actions/setup-java@v1
20+
uses: actions/setup-java@v2
2121
with:
22-
java-version: 11
22+
distribution: 'adopt' # See 'Supported distributions' for available options
23+
java-version: '11'
2324
- name: Build provisioning-app BE (copy the FE artifacts to 'build/resources/main/static/nfe')
2425
run: ./gradlew clean spotlessCheck build
2526
env:

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
### Added
66

7+
- SPA dependencies update incl. Angular 12 ([#692](https://github.com/opendevstack/ods-provisioning-app/issues/692))
78
- Add swagger-ui support ([#679](https://github.com/opendevstack/ods-provisioning-app/pull/679))
89
- Handle logout in SPA ([#675](https://github.com/opendevstack/ods-provisioning-app/issues/675))
910
- Handle form based auth in SPA ([#637](https://github.com/opendevstack/ods-provisioning-app/issues/637))

build.gradle

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -183,15 +183,15 @@ gradleLint {
183183
rules = ['unused-dependency']
184184
}
185185

186-
task yarnBuild(type:Exec) {
186+
task npmBuild(type:Exec) {
187187

188188
workingDir 'client'
189189

190190
//on windows:
191-
commandLine 'cmd', '/c', 'yarn', 'build'
191+
commandLine 'cmd', '/c', 'npm', 'run', 'build'
192192

193193
//on linux
194-
commandLine 'yarn', 'build'
194+
commandLine 'npm', 'run', 'build'
195195
}
196196

197-
bootRun.dependsOn yarnBuild
197+
bootRun.dependsOn npmBuild

client/.eslintrc.json

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,37 @@
2323
{
2424
"files": ["*.ts"],
2525
"parserOptions": {
26-
"project": [
27-
"tsconfig.*?.json"
28-
// "e2e/tsconfig.json"
29-
],
26+
"project": ["tsconfig.*?.json"],
3027
"createDefaultProgram": true
3128
},
32-
"extends": ["plugin:@angular-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended"],
29+
"extends": [
30+
"plugin:@angular-eslint/recommended",
31+
"plugin:@angular-eslint/template/process-inline-templates",
32+
"plugin:prettier/recommended"
33+
],
3334
"rules": {
3435
/**
3536
* Any TypeScript related rules you wish to use/reconfigure over and above the
3637
* recommended set provided by the @angular-eslint project would go here.
3738
*
3839
* There are some examples below from the @angular-eslint plugin and ESLint core:
3940
*/
40-
"@angular-eslint/directive-selector": ["error", { "type": "attribute", "prefix": "app", "style": "camelCase" }],
41-
"@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "app", "style": "kebab-case" }],
42-
"quotes": ["error", "single", { "allowTemplateLiterals": true }]
41+
"@angular-eslint/directive-selector": [
42+
"error",
43+
{
44+
"type": "attribute",
45+
"prefix": "app",
46+
"style": "camelCase"
47+
}
48+
],
49+
"@angular-eslint/component-selector": [
50+
"error",
51+
{
52+
"type": "element",
53+
"prefix": "app",
54+
"style": "kebab-case"
55+
}
56+
]
4357
}
4458
},
4559

@@ -48,12 +62,14 @@
4862
* COMPONENT TEMPLATES
4963
* -----------------------------------------------------
5064
*
51-
* If you use inline templates, make sure you read the notes on the configuration
52-
* object after this one to understand how they relate to this configuration directly
53-
* below.
65+
* If you use inline templates, make sure you you have read the notes on the extends
66+
* in the "*.ts" overrides above to understand how they relate to this configuration
67+
* directly below.
5468
*/
69+
70+
// NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
5571
{
56-
"files": ["*.component.html"],
72+
"files": ["*.html"],
5773
"extends": ["plugin:@angular-eslint/template/recommended"],
5874
"rules": {
5975
/**
@@ -62,34 +78,15 @@
6278
*/
6379
}
6480
},
65-
66-
/**
67-
* -----------------------------------------------------
68-
* EXTRACT INLINE TEMPLATES (from within .component.ts)
69-
* -----------------------------------------------------
70-
*
71-
* This extra piece of configuration is necessary to extract inline
72-
* templates from within Component metadata, e.g.:
73-
*
74-
* @Component({
75-
* template: `<h1>Hello, World!</h1>`
76-
* })
77-
* ...
78-
*
79-
* It works by extracting the template part of the file and treating it as
80-
* if it were a full .html file, and it will therefore match the configuration
81-
* specific for *.component.html above when it comes to actual rules etc.
82-
*
83-
* NOTE: This processor will skip a lot of work when it runs if you don't use
84-
* inline templates in your projects currently, so there is no great benefit
85-
* in removing it, but you can if you want to.
86-
*
87-
* You won't specify any rules here. As noted above, the rules that are relevant
88-
* to inline templates are the same as the ones defined for *.component.html.
89-
*/
81+
// NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
9082
{
91-
"files": ["*.component.ts"],
92-
"extends": ["plugin:@angular-eslint/template/process-inline-templates"]
83+
"files": ["*.html"],
84+
"excludedFiles": ["*inline-template-*.component.html"],
85+
"extends": ["plugin:prettier/recommended"],
86+
"rules": {
87+
// NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
88+
"prettier/prettier": ["error", { "parser": "angular" }]
89+
}
9390
}
9491
]
9592
}

client/.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ speed-measure-plugin*.json
3737
/coverage
3838
/libpeerconnection.log
3939
npm-debug.log
40-
yarn-error.log
4140
testem.log
4241
/typings
4342

client/README.md

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,25 @@ This first version of the new frontend stack was introduced as an experimental f
66
([original issue](https://github.com/opendevstack/ods-provisioning-app/issues/518)). It can be activated for users with a
77
`frontend.spa.enabled` feature flag in Spring Boot.
88

9-
OpenDevStack NEXT will include this new frontend activated by default (without featue flag).
9+
OpenDevStack NEXT will include this new frontend activated by default (without feature flag).
1010

1111
To contribute to the further development, see section "Contributions welcome!" further down.
1212

1313
## Stack
1414

15-
- [Angular](https://angular.io/) as single page application framework
16-
- [Jest](https://jestjs.io/) as unit testing framework
17-
- [Prettier](https://prettier.io/) as pre-commit-hook
18-
- [SASS Lint](https://github.com/sasstools/sass-lint) to check scss files
19-
- [Yarn](https://yarnpkg.com/) as package manager
15+
- [Angular](https://angular.io/)
16+
- [Jest](https://jestjs.io/)
17+
- [ESLint](https://eslint.org/)
18+
- [Prettier](https://prettier.io/)
2019

2120
See package.json for up-to-date version information.
2221

2322
## Getting started
2423

2524
### 1. Install dependencies
2625

27-
- Install YARN globally: `npm install -g yarn`
28-
- Run `yarn`, this will install all dependencies
26+
- Eventually, install NPM first
27+
- Run `npm install` to install all dependencies
2928

3029
### 2. Configure API access from localhost
3130

@@ -37,14 +36,14 @@ Doing this there's no need to run Spring Boot locally.
3736

3837
### 3. Test the setup
3938

40-
Run `yarn start:dev` and when it succeeded open `http://localhost:4200` in your browser. You should see the Angular app starting. The app
39+
Run `npm run start:dev` and when it succeeded open `http://localhost:4200` in your browser. You should see the Angular app starting. The app
4140
will automatically reload if you change any of the source files.
4241

4342
## Development
4443

4544
### Dev Server
4645

47-
`yarn start:dev`: Starts a live reload dev server on `http://localhost:4200/`
46+
`npm run start:dev`: Starts a live reload dev server on `http://localhost:4200/`
4847

4948
### Dev Server with SSL localhost
5049

@@ -60,21 +59,17 @@ behaves correctly. Although not ideal, we discovered this as the most effortless
6059

6160
### Build
6261

63-
`yarn build`: The build artifacts will be stored in the `dist/` directory. `yarn build:prod` will be used for the pipeline.
62+
- `npm run build`: The build artifacts will be stored in the `dist/` directory.
63+
- `npm run build:prod` will be used for the pipeline.
6464

6565
### Tests
6666

67-
- Unittests: `yarn test` / `yarn test:watch`
67+
- Unittests: `npm run test` / `npm run test:watch`
6868
- E2E (Cypress): TODO
6969

7070
### Linting
7171

72-
- `yarn lint`: Linting for Typescript and SCSS files.
73-
74-
### Prettier
75-
76-
Prettier is used as a pre-commit hook to format js, json, md, ts files. Formatting of html files has been temporarily removed due to
77-
inflexibility in context of Angular component markup.
72+
- `npm run lint`: Linting for Typescript (using [angular-eslint](https://github.com/angular-eslint/angular-eslint)) incl. Prettier as an eslint rule. This npm task also runs as a pre-commit hook.
7873

7974
## Contributions welcome!
8075

client/angular.json

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,15 @@
2525
"main": "src/main.ts",
2626
"polyfills": "src/polyfills.ts",
2727
"tsConfig": "tsconfig.app.json",
28-
"aot": true,
2928
"assets": ["src/favicon.ico", "src/assets"],
3029
"styles": ["src/app/ui/scss/styles.scss"],
31-
"scripts": []
30+
"scripts": [],
31+
"vendorChunk": true,
32+
"extractLicenses": false,
33+
"buildOptimizer": false,
34+
"sourceMap": true,
35+
"optimization": false,
36+
"namedChunks": true
3237
},
3338
"configurations": {
3439
"production": {
@@ -45,6 +50,9 @@
4550
"extractLicenses": true,
4651
"vendorChunk": false,
4752
"buildOptimizer": true,
53+
"aot": true,
54+
"statsJson": true,
55+
"progress": true,
4856
"budgets": [
4957
{
5058
"type": "initial",
@@ -58,7 +66,8 @@
5866
}
5967
]
6068
}
61-
}
69+
},
70+
"defaultConfiguration": ""
6271
},
6372
"serve": {
6473
"builder": "@angular-devkit/build-angular:dev-server",

0 commit comments

Comments
 (0)