From 266c78662ca9ae3fcee830a77490eb941e1bb8da Mon Sep 17 00:00:00 2001 From: Brian Blakely Date: Wed, 18 Aug 2021 22:22:17 -0400 Subject: [PATCH 1/2] Composition/Storyshots: Cr path for Puppeteer. --- addons/storyshots/storyshots-puppeteer/src/config.ts | 2 +- lib/cli/src/extract.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/storyshots/storyshots-puppeteer/src/config.ts b/addons/storyshots/storyshots-puppeteer/src/config.ts index e8665a396fd1..c6f40fd6bd04 100644 --- a/addons/storyshots/storyshots-puppeteer/src/config.ts +++ b/addons/storyshots/storyshots-puppeteer/src/config.ts @@ -52,7 +52,7 @@ const asyncNoop: () => Promise = async () => undefined; export const defaultCommonConfig: CommonConfig = { storybookUrl: 'http://localhost:6006', - chromeExecutablePath: undefined, + chromeExecutablePath: process.env.SB_CHROMIUM_PATH, getGotoOptions: noop, customizePage: asyncNoop, getCustomBrowser: undefined, diff --git a/lib/cli/src/extract.ts b/lib/cli/src/extract.ts index 5826c15d5b4e..688574be7715 100644 --- a/lib/cli/src/extract.ts +++ b/lib/cli/src/extract.ts @@ -52,7 +52,7 @@ const useLocation: (input: string) => Promise<[string, () => void]> = async (inp const usePuppeteerBrowser: () => Promise = async () => { const args = ['--no-sandbox ', '--disable-setuid-sandbox']; try { - return await puppeteerCore.launch({ args }); + return await puppeteerCore.launch({ args, executablePath: process.env.SB_CHROMIUM_PATH }); } catch (e) { // it's not installed logger.info('installing puppeteer...'); From e2ecd8677e596a288b35b1b7be1079de94aea4a1 Mon Sep 17 00:00:00 2001 From: Brian Blakely Date: Wed, 18 Aug 2021 22:42:34 -0400 Subject: [PATCH 2/2] Composition/Storyshots: Env var docs. --- addons/storyshots/storyshots-puppeteer/README.md | 2 ++ docs/workflows/storybook-composition.md | 8 +++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index 51aebee3cc20..9c793d56f0a5 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/addons/storyshots/storyshots-puppeteer/README.md @@ -123,6 +123,8 @@ initStoryshots({ }); ``` +Alternatively, you may set the `SB_CHROMIUM_PATH` environment variable. If both are set, then `chromeExecutablePath` will take precedence. + ### Specifying a custom Puppeteer `browser` instance You might use the async `getCustomBrowser` function to obtain a custom instance of a Puppeteer `browser` object. This will prevent `storyshots-puppeteer` from creating its own `browser`. It will create and close pages within the `browser`, and it is your responsibility to manage the lifecycle of the `browser` itself. diff --git a/docs/workflows/storybook-composition.md b/docs/workflows/storybook-composition.md index 755f48aef517..1dbaca449b53 100644 --- a/docs/workflows/storybook-composition.md +++ b/docs/workflows/storybook-composition.md @@ -23,7 +23,7 @@ In your [`storybook/main.js`](../configure/overview.md#configure-story-rendering
- We would like to point out that there's some limitations to composition. For now addons in composed Storybooks will not work as they do in non composed Storybooks. + We would like to point out that there's some limitations to composition. For now addons in composed Storybooks will not work as they do in non composed Storybooks.
## Compose local Storybooks @@ -70,6 +70,12 @@ So far we've covered how we can use composition with local or published Storyboo npx sb extract ``` +
+ +`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Specify your own locally-installed Chromium executable by setting the environment variable `SB_CHROMIUM_PATH`. + +
+ Using this command will generate a `stories.json` file in the default build directory (`storybook-static`) with information regarding your Storybook. Here's how it might look: