|
1 |
| -# TypeScript ESLint Config [](https://www.npmjs.com/package/@nordicsemiconductor/eslint-config-asset-tracker-cloud-typescript) |
| 1 | +# nRF Asset Tracker Web Application for AWS |
2 | 2 |
|
3 |
| -[](https://github.com/NordicSemiconductor/asset-tracker-cloud-eslint-config-typescript/actions) |
| 3 | +[](https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/actions) |
4 | 4 | [](https://github.com/semantic-release/semantic-release)
|
5 | 5 | [](https://renovatebot.com)
|
6 |
| -[](https://mergify.io) |
7 |
| -[](http://commitizen.github.io/cz-cli/) |
| 6 | +[](https://mergify.io) |
| 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/) |
10 | 14 |
|
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/). |
14 | 18 |
|
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. |
18 | 24 |
|
19 |
| -## Installation |
| 25 | +[Vite](https://vitejs.dev/) is used as the frontend toolchain. |
20 | 26 |
|
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/). |
22 | 29 |
|
23 |
| -## Usage |
| 30 | +## Set up |
24 | 31 |
|
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 | +``` |
0 commit comments