Running the application requires the following tools to be installed in your environment:
Install dependencies by executing the following command:
$ yarn installBundle:
$ yarn webpackRun:
$ yarn startRun Dev Mode:
$ yarn start:devRun Dev Mode With Redis server:
$ yarn start:dev-redThe applications's home page will be available at https://localhost:3002
Create docker image:
docker-compose buildRun the application by executing the following command:
docker-compose upThis will start the frontend container exposing the application's port
(set to 3002 in this template app).
In order to test if the application is up, you can visit https://localhost:3002 in your browser. You should get a very basic home page (no styles, etc.).
As CFTLIB may have different ports for IDAM API we need to have the following environment variables defined
IDAM_WEB_URL=http://localhost:XXXX/login
IDAM_API_URL=http://localhost:XXXX/o/token
XXXX is the port which CFTLIB uses for IDAM
We use ESLint with Prettier alongside sass-lint [Husky] Pre-Commit Hooks are enabled which makes sure all your files are formatted before commiting (https://github.com/typicode/husky)
Running the linting with ES auto fix and Prettier check:
$ yarn lint --fixRunning the linting with Prettier auto fix:
$ yarn prettier src/* --writeThis template app uses Jest as the test engine. You can run unit tests by executing the following command:
$ yarn testHere's how to run functional tests (the template contains just one sample test):
$ yarn test:routesRunning accessibility tests:
$ yarn test:a11yMake sure all the paths in your application are covered by accessibility tests (see a11y.ts).
Running all continuous integration tests:
$ yarn cichecksCross-Site Request Forgery prevention has already been
set up in this template, at the application level. However, you need to make sure that CSRF token
is present in every HTML form that requires it. For that purpose you can use the csrfProtection macro,
included in this template app. Your njk file would look like this:
...
<form ...>
...
<input type="hidden" name="_csrf" value={{ csrfToken }}>
...
</form>
...
This application uses Helmet, which adds various security-related HTTP headers to the responses. Apart from default Helmet functions, following headers are set:
There is a configuration section related with those headers, where you can specify:
referrerPolicy- value of theReferrer-Policyheader.
Here's an example setup:
{
"security": {
"referrerPolicy": "origin"
}
}Make sure you have those values set correctly for your application.
The application exposes a health endpoint (https://localhost:3002/health), created with the use of Nodejs Healthcheck library. This endpoint is defined in health.ts file. Make sure you adjust it correctly in your application. In particular, remember to replace the sample check with checks specific to your frontend app, e.g. the ones verifying the state of each service it depends on.
This project is licensed under the MIT License - see the LICENSE file for details
| Technology | Description |
|---|---|
| Nodejs & Yarn | Node.js & yarn |
| Codecept 3.2.3 | CodeceptJS allows to run several browser sessions inside a test. This can be useful for testing communication between users inside a chat or other systems. |
| Puppeteer 13.2.0 | Puppeteer framework is one such framework that offers Headless Browser Testing for Google Chrome. It allows the tester to perform the actions on the Chrome browser using commands in JavaScript |
| JavaScript | Using java script to implement features & scenarios |
$ yarn test:functionalThe security tests are run using the OWASP ZAP tool. The tests are run nightly and the
results can be found in the functional-output folder of the nightly build.
There are five severity levels of the alerts, the lower severity (False Positives) are ignored, any higher severity fails the build.
In order to suppress the High, Medium and Low level alerts, check the console output of the nightly build and look for
"Running base report...". Below that there will be a JSON output of the alerts, for each of the alerts copy the
fingerprint value and paste it into the audit.json file in this repository.
To suppress the Informational level alerts, add them to the ALERT_FILTERS parameter in the Jenkinsfile_nightly file.
The difference between these two methods is that, the ALERT_FILTERS will downgrade severity of all instances of an
alert. The audit.json file will not downgrade the severity but will ignore the specific instance of the alert.
This way any High, Medium or Low alerts are still visible in the report but are not failing the build. The Informational alerts are visible in the report as False Positives and also not failing the build.
Employment Tribunals