From 628bc2808b79abdfd00f44e67face9bbfa2a3057 Mon Sep 17 00:00:00 2001 From: regexowl Date: Tue, 21 Nov 2023 13:15:24 +0100 Subject: [PATCH] README: Setup certificate for msw This adds steps for setting up certificates needed in order to run msw with mocked data. --- README.md | 44 +++++++++++++++++++++++++------------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index ec64dbfa..2bc531ad 100644 --- a/README.md +++ b/README.md @@ -249,27 +249,21 @@ npm run test 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 -If you want to develop in environment with mocked data, -run the command `npm run stage-beta:msw`. -To enable msw, you must configure SSL certification on your computer. +If you want to develop in environment with mocked data, run the command `npm run stage-beta:msw`. -## 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: 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. -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. @@ -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. +## 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 +```