Make pnpm storybook fail with clear error if certs are not set up (#…

…44589)

* Add note in web README about certs for Storybook

* Test for web/certs/server.crt before starting storybook

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",

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.