|
1 |
| -# nRF Asset Tracker Web Application for AWS |
| 1 | +# TypeScript ESLint Config [](https://www.npmjs.com/package/@nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript) |
2 | 2 |
|
3 |
| -[](https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/actions) |
| 3 | +[](https://github.com/NordicSemiconductor/asset-tracker-cloud-eslint-config-typescript/actions) |
4 | 4 | [](https://github.com/semantic-release/semantic-release)
|
5 | 5 | [](https://renovatebot.com)
|
6 |
| -[](https://mergify.io) |
| 6 | +[](https://mergify.io) |
7 | 7 | [](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional)
|
8 | 8 | [](https://github.com/prettier/prettier/)
|
9 | 9 | [](https://github.com/typescript-eslint/typescript-eslint)
|
10 |
| -[](https://reactjs.org/) |
11 |
| -[](https://getbootstrap.com/docs/5.0/) |
12 |
| -[](https://github.com/css-modules/css-modules) |
13 |
| -[](https://vitejs.dev/) |
14 | 10 |
|
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/). |
| 11 | +ESLint configuration (with |
| 12 | +[TypeScript support](https://github.com/typescript-eslint/typescript-eslint)) |
| 13 | +for all nRF Asset Tracker projects. |
18 | 14 |
|
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. |
| 15 | +See |
| 16 | +[@nordicsemiconductor/asset-tracker-cloud-code-style](https://github.com/NordicSemiconductor/asset-tracker-cloud-code-style-js#readme) |
| 17 | +for usage. |
24 | 18 |
|
25 |
| -[Vite](https://vitejs.dev/) is used as the frontend toolchain. |
| 19 | +## Installation |
26 | 20 |
|
27 |
| -> :information_source: |
28 |
| -> [Read the complete nRF Asset Tracker documentation](https://nordicsemiconductor.github.io/asset-tracker-cloud-docs/). |
| 21 | + npm i --save-dev --save-exact @nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript |
29 | 22 |
|
30 |
| -## Set up |
| 23 | +## Usage |
31 | 24 |
|
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 |
| -``` |
| 25 | + echo '{"extends": "@nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript"}' > .eslintrc |
0 commit comments