Skip to content
This repository was archived by the owner on Feb 19, 2024. It is now read-only.

Commit 3e3c454

Browse files
committed
style: switch to @commitlint/config-conventional
It is a more generic set of rules.
1 parent ff0975d commit 3e3c454

File tree

4 files changed

+205
-15
lines changed

4 files changed

+205
-15
lines changed

README.md

Lines changed: 160 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,171 @@
1-
# TypeScript ESLint Config [![npm version](https://img.shields.io/npm/v/@nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript.svg)](https://www.npmjs.com/package/@nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript)
1+
# nRF Asset Tracker Web Application for AWS
22

3-
[![GitHub Actions](https://github.com/NordicSemiconductor/asset-tracker-cloud-eslint-config-typescript/workflows/Semantic%20Release/badge.svg)](https://github.com/NordicSemiconductor/asset-tracker-cloud-eslint-config-typescript/actions)
3+
[![GitHub Actions](https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/workflows/Test%20and%20Release/badge.svg)](https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/actions)
44
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
55
[![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)
6-
[![Mergify Status](https://img.shields.io/endpoint.svg?url=https://api.mergify.com/v1/badges/NordicSemiconductor/asset-tracker-cloud-eslint-config-typescript)](https://mergify.io)
7-
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
6+
[![Mergify Status](https://img.shields.io/endpoint.svg?url=https://api.mergify.com/v1/badges/NordicSemiconductor/asset-tracker-cloud-app-aws-js)](https://mergify.io)
7+
[![@commitlint/config-conventional](https://img.shields.io/badge/%40commitlint-config--conventional-brightgreen)](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional)
88
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier/)
99
[![ESLint: TypeScript](https://img.shields.io/badge/ESLint-TypeScript-blue.svg)](https://github.com/typescript-eslint/typescript-eslint)
10+
[![React](https://github.com/aleen42/badges/raw/master/src/react.svg)](https://reactjs.org/)
11+
[![Bootstrap 5](https://img.shields.io/badge/Bootstrap-5-ffffff?labelColor=7952b3)](https://getbootstrap.com/docs/5.0/)
12+
[![CSS modules](https://img.shields.io/badge/CSS-modules-yellow)](https://github.com/css-modules/css-modules)
13+
[![Vite](https://github.com/aleen42/badges/raw/master/src/vitejs.svg)](https://vitejs.dev/)
1014

11-
ESLint configuration (with
12-
[TypeScript support](https://github.com/typescript-eslint/typescript-eslint))
13-
for all nRF Asset Tracker projects.
15+
The nRF Asset Tracker Web Application for AWS is a reference single-page
16+
application (SPA) developed with [React](https://reactjs.org/) in
17+
[TypeScript](https://www.typescriptlang.org/).
1418

15-
See
16-
[@nordicsemiconductor/asset-tracker-cloud-code-style](https://github.com/NordicSemiconductor/asset-tracker-cloud-code-style-js#readme)
17-
for usage.
19+
The UI components are themed using
20+
[Bootstrap 5](https://getbootstrap.com/docs/5.0/) and
21+
[CSS modules](https://github.com/css-modules/css-modules). All complex UI logic
22+
is extracted using [React hooks](https://reactjs.org/docs/hooks-custom.html) to
23+
allow re-use when changing the UI framework.
1824

19-
## Installation
25+
[Vite](https://vitejs.dev/) is used as the frontend toolchain.
2026

21-
npm i --save-dev --save-exact @nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript
27+
> :information_source:
28+
> [Read the complete nRF Asset Tracker documentation](https://nordicsemiconductor.github.io/asset-tracker-cloud-docs/).
2229
23-
## Usage
30+
## Set up
2431

25-
echo '{"extends": "@nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript"}' > .eslintrc
32+
npm ci
33+
34+
## Configuration
35+
36+
In the
37+
[nRF Asset Tracker for AWS](https://github.com/NordicSemiconductor/asset-tracker-cloud-aws-js)
38+
folder, run `node cli web-app-config` and store the output in a local `.envrc`
39+
file. Then run `direnv allow` to allow it.
40+
41+
```bash
42+
# .envrc
43+
export PUBLIC_CELL_GEO_LOCATION_CACHE_TABLE_NAME=...
44+
export PUBLIC_CLOUDFRONT_DISTRIBUTION_ID=...
45+
export PUBLIC_FOTA_BUCKET_NAME=...
46+
export PUBLIC_GEOLOCATION_API_URL=...
47+
export PUBLIC_HISTORICALDATA_TABLE_INFO=...
48+
export PUBLIC_IDENTITY_POOL_ID=...
49+
export PUBLIC_NETWORK_SURVEY_GEOLOCATION_API_URL=...
50+
export PUBLIC_NETWORKSURVEY_STORAGE_TABLE_NAME=...
51+
export PUBLIC_USER_IOT_POLICY_NAME=...
52+
export PUBLIC_USER_POOL_ID=...
53+
export PUBLIC_USER_POOL_CLIENT_ID=...
54+
export PUBLIC_WEB_APP_BUCKET_NAME=...
55+
export PUBLIC_WEB_APP_DOMAIN_NAME=...
56+
export PUBLIC_SENTRY_DSN=...
57+
export PUBLIC_REGION=...
58+
export PUBLIC_MQTT_ENDPOINT=...
59+
```
60+
61+
## Running
62+
63+
npm start
64+
65+
## End-to-end tests using Playwright
66+
67+
The frontend provides [end-to-end tests](./e2e-tests) using
68+
[Playwright](https://playwright.dev/).
69+
70+
### Configure AWS credentials
71+
72+
The end-to-end tests run against an instance of the
73+
[nRF Asset Tracker for AWS](https://github.com/NordicSemiconductor/asset-tracker-cloud-aws-js).
74+
75+
Either, use the credentials you created, when setting up the solution, or enable
76+
the Web App CI feature and use the dedicated credentials created for this task.
77+
The latter option is the recommended approach since it limits the permission
78+
scope to only the needed ones. They can also be used to
79+
[run the end-to-end tests on GitHub Actions](#running-end-to-end-tests-using-github-actions).
80+
81+
Add these environment variables to your `.envrc`. Then run `direnv allow` to
82+
allow it.
83+
84+
```bash
85+
# .envrc
86+
export AWS_REGION=...
87+
export AWS_ACCESS_KEY_ID=...
88+
export AWS_SECRET_ACCESS_KEY=...
89+
export WEBAPP_STACK_NAME=...
90+
```
91+
92+
### Running the tests
93+
94+
You can then run the tests using
95+
96+
npm run test:e2e
97+
98+
### Running individual tests
99+
100+
npx playwright test authenticated/map/locationHistory/gnss.spec.ts
101+
102+
### Playwright Inspector
103+
104+
For developing tests it is helpful to run the
105+
[Playwright Inspector](https://playwright.dev/docs/inspector).
106+
107+
You can enabled the inspector during the tests by running
108+
109+
PWDEBUG=1 npm run test:e2e
110+
111+
### Running end-to-end tests using GitHub Actions
112+
113+
[This workflow](./.github/workflows/test-and-release.yaml) runs the end-to-end
114+
tests for every commit. For this to work a running instance of
115+
[nRF Asset Tracker for AWS](https://github.com/NordicSemiconductor/asset-tracker-cloud-aws-js)
116+
is needed. The tests will be run against this instance. Typically it will be the
117+
production instance, to ensure that the web application works with the current
118+
production setup.
119+
120+
In order for the test runner to interact with the instance for retrieving the
121+
app configuration and for providing test data you need to configure AWS
122+
credentials as
123+
[GitHub environment secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-an-environment).
124+
125+
Set these secrets:
126+
127+
- `AWS_REGION`
128+
- `AWS_ACCESS_KEY_ID`
129+
- `AWS_SECRET_ACCESS_KEY`
130+
- `WEBAPP_STACK_NAME`
131+
132+
If you have enabled the web application CI of the nRF Asset Tracker for AWS
133+
(`node cli configure context stack web-app-ci 1`) you can acquire them using the
134+
nRF Asset Tracker for AWS CLI:
135+
136+
```bash
137+
node cli web-app-ci -s
138+
```
139+
140+
You can set the secrets through the GitHub UI (make sure to create the
141+
`production`
142+
[environment](https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment)
143+
in your repository first).
144+
145+
Alternatively you can use the [GitHub CLI](https://cli.github.com/) using the
146+
environment settings from above:
147+
148+
```bash
149+
gh secret set AWS_REGION --env production --body "${AWS_REGION}"
150+
gh secret set AWS_ACCESS_KEY_ID --env production --body "${AWS_ACCESS_KEY_ID}"
151+
gh secret set AWS_SECRET_ACCESS_KEY --env production --body "${AWS_SECRET_ACCESS_KEY}"
152+
gh secret set WEBAPP_STACK_NAME --env production --body "${WEBAPP_STACK_NAME}"
153+
```
154+
155+
## Sentry
156+
157+
Optionally, Sentry can be enabled for the web application. Export the
158+
`PUBLIC_SENTRY_DSN` environment variable.
159+
160+
To enable this in the continuous deployment pipeline of nRF Asset Tracker,
161+
configure the DSN using the CLI:
162+
163+
```bash
164+
./cli.sh configure thirdParty sentry sentryDsn https://4f901247818d46099a3f15b6ada9390e@o4504255385174016.ingest.sentry.io/4504684789170176
165+
```
166+
167+
When the next deployment is triggered, the DSN becomes available via
168+
169+
```bash
170+
./cli.sh web-app-config
171+
```

commitlint.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = { extends: ['@commitlint/config-angular'] }
1+
module.exports = { extends: ["@commitlint/config-conventional"] };

package-lock.json

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"author": "Nordic Semiconductor ASA | nordicsemi.no",
1919
"license": "BSD-3-Clause",
2020
"devDependencies": {
21+
"@commitlint/config-conventional": "17.8.0",
2122
"@nordicsemiconductor/asset-tracker-cloud-code-style": "12.0.94"
2223
},
2324
"lint-staged": {

0 commit comments

Comments
 (0)