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 startThe application's home page will be available at https://localhost:3001
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
In order to test if the application is up, you can visit https://localhost:3001 in your browser.
We use ESLint alongside sass-lint
Running the linting with auto fix:
$ yarn lint --fixThis 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:a11yRunning functional tests:
Update required secrets on your machine then run below command
$ yarn test:functionalRunning E2E tests:
For that we need to follow three steps:
- Start wiremock server
$ yarn wiremock:start- Start the application as E2E
$ yarn start:e2e- Execute E2E test
$ yarn test:e2eRunning Preview pipeline :
Raise a PR and add below labels to run the pipeline without any issues
fullDeploy, pr-values:elasticsearchAdd "enable_keep_helm" label to retain helm release on preview Add "pr-values:enableNotifyEmails" label to be able to send live notifications on the PR
Running Crossbrowser tests:
Install saucelabs on local machine
$ yarn test:crossbrowserMake sure all the paths in your application are covered by accessibility tests (see a11y.test.ts).
Cross-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:
{% from "macros/csrf.njk" import csrfProtection %}
...
<form ...>
...
{{ csrfProtection(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:3001/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.
- Make sure your git version is at least 2.9 using the
git --versioncommand - Run the following command:
git config --local core.hooksPath .git-config/hooks
Once the above is done, you will be required to follow specific conventions for your commit messages and branch names.
If you violate a convention, the git error message will report clearly the convention you should follow and provide additional information where necessary.
Optional:
-
Install this plugin in Chrome: https://github.com/refined-github/refined-github
It will automatically set the title for new PRs according to the first commit message, so you won't have to change it manually.
Note that it will also alter other behaviours in GitHub. Hopefully these will also be improvements to you.
In case of problems
-
Get in touch with your Technical Lead so that they can get you unblocked
-
If the rare eventuality that the above is not possible, you can disable enforcement of conventions using the following command
git config --local --unset core.hooksPathStill, you shouldn't be doing it so make sure you get in touch with a Technical Lead soon afterwards.
This project is licensed under the MIT License - see the LICENSE file for details.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent