Cruscotto PagoPA

Cruscotto Qualificazione & Certificazione PT EC (FE)

Project Structure

Development

The build system will install automatically the recommended version of Node and npm.

We provide a wrapper to launch npm. You will only need to run this command when dependencies change in package.json.

./npmw install

We use npm scripts and [Angular CLI][] with [Webpack][] as our build system.

Run the following commands in two separate terminals to create a blissful development experience where your browser auto-refreshes when files change on your hard drive.

./mvnw
./npmw start

Npm is also used to manage CSS and JavaScript dependencies used in this application. You can upgrade dependencies by specifying a newer version in package.json. You can also run ./npmw update and ./npmw install to manage dependencies. Add the help flag on any command to see how you can use it. For example, ./npmw help update.

The ./npmw run command will list all the scripts available to run for this project.

PWA Support

JHipster ships with PWA (Progressive Web App) support, and it's turned off by default. One of the main components of a PWA is a service worker.

The service worker initialization code is disabled by default. To enable it, uncomment the following code in src/main/webapp/app/app.config.ts:

ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),

Managing dependencies

For example, to add [Leaflet][] library as a runtime dependency of your application, you would run following command:

./npmw install --save --save-exact leaflet

To benefit from TypeScript type definitions from [DefinitelyTyped][] repository in development, you would run following command:

./npmw install --save-dev --save-exact @types/leaflet

Then you would import the JS and CSS files specified in library's installation instructions so that [Webpack][] knows about them: Edit src/main/webapp/app/app.config.ts file:

import 'leaflet/dist/leaflet.js';

Edit src/main/webapp/content/scss/vendor.scss file:

@import 'leaflet/dist/leaflet.css';

Note: There are still a few other things remaining to do for Leaflet that we won't detail here.

For further instructions on how to develop with JHipster, have a look at [Using JHipster in development][].

Using Angular CLI

You can also use [Angular CLI][] to generate some custom client code.

For example, the following command:

ng generate component my-component

will generate few files:

create src/main/webapp/app/my-component/my-component.component.html
create src/main/webapp/app/my-component/my-component.component.ts
update src/main/webapp/app/app.config.ts

Building for production

Testing

Client tests

Unit tests are run by [Jest][]. They're located near components and can be run with:

./npmw test

UI end-to-end tests are powered by [Cypress][]. They're located in src/test/javascript/cypress and can be run by starting Spring Boot in one terminal (./mvnw spring-boot:run) and running the tests (./npmw run e2e) in a second one.

Lighthouse audits

You can execute automated Lighthouse audits with cypress-audit by running ./npmw run e2e:cypress:audits. You should only run the audits when your application is packaged with the production profile. The lighthouse report is created in target/cypress/lhreport.html

E2E Webapp Code Coverage

When using Cypress, you can generate code coverage report by running your dev server with instrumented code:

Build your Angular application with instrumented code:

npm run webapp:instrumenter

Start your backend without compiling frontend:

npm run backend:start

Start your Cypress end to end testing:

npm run e2e:cypress:coverage