From 17b8bf4250c4db5d72ed71345856b6edb97bff1d Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 6 Jun 2022 19:27:33 +0100 Subject: [PATCH] Minor tweaks around SB env vars --- docs/configure/environment-variables.md | 6 ++++++ docs/configure/overview.md | 3 ++- docs/faq.md | 11 ++++++++++- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index d6439226bb4d..1109db35c15b 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -9,6 +9,12 @@ If you supply an environment variable prefixed with `STORYBOOK_`, it will be ava STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook ``` +
+ + 💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files. + +
+ Then we can access these environment variables anywhere inside our preview JavaScript code like below: diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 83eed8505c43..c2a7fa44c02c 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -178,7 +178,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` | | `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | | `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | | `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` | | `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` | @@ -186,6 +186,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde | `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | | `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | | `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | ## Configure story rendering diff --git a/docs/faq.md b/docs/faq.md index 766f29ed4adf..f05062edf05e 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -475,4 +475,13 @@ export default { ### Why isn't Storybook's test runner working? -There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. \ No newline at end of file +There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. + + +### How does Storybook handles enviroment variables? + +Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook. + +To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file. + +Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)). \ No newline at end of file