Support testing Storybook at any URL

[thibaudcolas]

We’re hosting our Storybook build at a sub-path of the site, for example https://example.com/storybook/. We do this largely for hosting convenience – it’s easier to not have to set up a separate hosting just for Storybook, and when stories depend on API data from the site, it’s easier to not have to set up CORS headers just for the shared Storybook environments.

This doesn’t seem to be supported by the SDK – when I do:

percy storybook https://example.com/storybook

I get the following error:

[percy] Error: Storybook object not found on the window. Open Storybook and check the console for errors.

In server logs, I can see the SDK making requests to https://example.com/iframe.html, rather than https://example.com/storybook/iframe.html.

---

This feels like something that would be very straightforward to support, and be useful to at least some people? Storybook itself doesn’t care about whether it’s hosted at the root or not, so if Percy doesn’t support this it would be nice to at least document it somewhere.

Looking at the code, I think the only issue is with URL concatenation:

• percy-storybook/src/eval.js

  Lines 78 to 79 in 7ad3786

  	let previewUrl = new URL('iframe.html', url);
  	let aboutUrl = new URL('?path=/settings/about', url);

• percy-storybook/src/snapshots.js

  Line 58 in 7ad3786

  snapshot.url = new URL(storyPreview, baseUrl).href;

I’d happily create a PR if it helps.

[wwilsman]

Hi @thibaudcolas!

I think this is because of how new URL() makes the resulting URL relative to the base URL.

An example including a file extension to highlight this:

new URL('foo.html', 'http://localhost/base/bar.html').href === 'http://localhost/base/foo.html'

And the same exact URL, but without the file extension:

new URL('foo', 'http://localhost/base/bar').href === 'http://localhost/base/foo'

To make the URL relative to the root of your base URL, you'll need to include the "root" part as well:

new URL('foo', 'http://localhost/base/bar/').href === 'http://localhost/base/bar/foo'
//                                       ^ notice the trailing slash

To summarize, you should be able to still use your base URL as long as you include the trailing slash.

However, in the context of this command, that isn't very obvious or intuitive unless you know how new URL() works. So we're going to add a check to automatically add a trailing slash to the URL argument when one is missing.