particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

README: Setup certificate for msw

Browse source 
This adds steps for setting up certificates needed in order to run msw with mocked data.
This commit is contained in:
regexowl 2023-11-21 13:15:24 +01:00 • committed by Klara Simickova
parent 38c97644cb
commit 628bc2808b
1 changed files with 25 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

44
README.md
View file

@ -249,27 +249,21 @@ npm run test
These tests will also be run in our Travis CI when a PR is opened. These tests will also be run in our Travis CI when a PR is opened.
## API endpoints
API slice definitions are generated using the [@rtk-query/codegen-openapi](https://redux-toolkit.js.org/rtk-query/usage/code-generation) package.
OpenAPI schema for the endpoints are stored in `/api/schema`. Their
corresponding configuration files are stored in `/api/config`. Each endpoint
has a corresponding empty API slice and generated API slice which are stored in
`/src/store`.
To generate or update API slice definitions, run:
```bash
npm run api
```
### Using MSW data in development ### Using MSW data in development
If you want to develop in environment with mocked data, If you want to develop in environment with mocked data, run the command `npm run stage-beta:msw`.
run the command `npm run stage-beta:msw`.
To enable msw, you must configure SSL certification on your computer.
## Mac Configurations #### Enabling MSW
In a case you're seeing `Error: [MSW] Failed to register the Service Worker` in console, you might also need to configure SSL certification on your computer.
In order to do this install [mkcert](https://github.com/FiloSottile/mkcert)
After the installation, go to the `/node_modules/.cache/webpack-dev-server` folder and run following commands:
1. `mkcert -install`  to create a new certificate authority on your machine
2. `mkcert prod.foo.redhat.com`  to create the actual signed certificate
#### Mac Configuration
Follow these steps to find and paste the certification file into the 'Keychain Access' application: Follow these steps to find and paste the certification file into the 'Keychain Access' application:
1. Open the 'Keychain Access' application. 1. Open the 'Keychain Access' application.
@ -278,7 +272,7 @@ Follow these steps to find and paste the certification file into the 'Keychain A
3. Navigate to the 'Certificates' tab. 3. Navigate to the 'Certificates' tab.
4. Drag the certification file (usually located at /image-builder-frontend/node_modules/.cache/webpack-dev-server/server.pem) to the certification list. 4. Drag the certification file (located at /image-builder-frontend/node_modules/.cache/webpack-dev-server/server.pem) to the certification list.
5. Double-click on the added certificate (localhost certificate) to open the localhost window. 5. Double-click on the added certificate (localhost certificate) to open the localhost window.
@ -291,4 +285,16 @@ Follow these steps to find and paste the certification file into the 'Keychain A
9. Run `npm run stage-beta:msw` and open the Firefox browser to verify that it is working as expected. 9. Run `npm run stage-beta:msw` and open the Firefox browser to verify that it is working as expected.
## API endpoints
API slice definitions are generated using the [@rtk-query/codegen-openapi](https://redux-toolkit.js.org/rtk-query/usage/code-generation) package.
OpenAPI schema for the endpoints are stored in `/api/schema`. Their
corresponding configuration files are stored in `/api/config`. Each endpoint
has a corresponding empty API slice and generated API slice which are stored in
`/src/store`.
To generate or update API slice definitions, run:
```bash
npm run api
```