diff --git a/package.json b/package.json index da3010543f0e9..cd35418211717 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build-term": "pnpm --filter=@gravitational/teleterm build", "start-term": "pnpm --filter=@gravitational/teleterm start", "package-term": "pnpm --filter=@gravitational/teleterm package", - "storybook": "storybook dev -p 9002 -c web/.storybook --https --ssl-cert=web/certs/server.crt --ssl-key=web/certs/server.key", + "storybook": "if test -f web/certs/server.crt; then storybook dev -p 9002 -c web/.storybook --https --ssl-cert=web/certs/server.crt --ssl-key=web/certs/server.key; else echo \"Could not find SSL certificates. Please follow web/README.md to generate certificates.\" && false; fi", "storybook-smoke-test": "storybook dev -p 9002 -c web/.storybook --ci --smoke-test", "test": "jest", "test-coverage": "jest --coverage && web/scripts/print-coverage-link.sh", diff --git a/web/README.md b/web/README.md index aa5c0dafd40e6..2c8d892a2898c 100644 --- a/web/README.md +++ b/web/README.md @@ -151,17 +151,21 @@ pnpm tdd ### Interactive Testing -We use [storybook](https://storybook.js.org/) for our interactive testing. +We use [Storybook](https://storybook.js.org/) for our interactive testing. It allows us to browse our component library, view the different states of each component, and interactively develop and test components. -To start a storybook: +> [!IMPORTANT] +> In order to start Storybook, you need to have certs in `web/certs`. +> See [Local HTTPS](#local-https) for how to set them up. + +To start Storybook: ``` pnpm storybook ``` -This command will open a new browser window with storybook in it. There +This command will open a new browser window with Storybook in it. There you will see components from all packages so it makes it faster to work and iterate on shared functionality.