Allow the server url to be set as a global parameter

Created on 28 February 2024, 4 months ago
Updated 9 May 2024, about 2 months ago

Problem/Motivation

When generating stories, parameter.server.url is automatically set in each stories file based on the internal:/storybook/stories/render URI. Due to Storybook's rules of parameter inheritance this makes it impossible to set the server url to a different environment other than the one in which the stories file was generated.

By allowing the server url to be set as a global parameter, static Storybook builds can be generated for different environments without having to regenerate a specific set of stories.json files each time. This is useful when deploying a Storybook build to static server such as Pantheon's multi-dev environments.

API changes

This adds a new CLI option to the storybook:generate-stories command that will omit the server url parameter from the generated stories allowing it to be set globally in Storybook.

Usage:

drush storybook:generate-all-stories --omit-server-url

In you will then need to set the server url globally in .storybook/preview.js. For example

const preview = {
  ...
    parameters: {
    server: {
      url: process.env.STORYBOOK_SERVER_URL || 'http://my-local-site.lndo.site/storybook/stories/render',
    },
  ...
}

Requires an update to twig-storybook

Data model changes

✨ Feature request
Status

Needs review

Version

1.0

Component

Storybook

Created by

πŸ‡ΊπŸ‡ΈUnited States pixelwhip

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @pixelwhip
  • Pipeline finished with Success
    4 months ago
    Total: 139s
    #105939
  • πŸ‡ΊπŸ‡ΈUnited States pixelwhip
  • πŸ‡ΊπŸ‡ΈUnited States pixelwhip
  • πŸ‡ΊπŸ‡ΈUnited States markie Albuquerque, NM

    Curious.. Why not have a `--server-url` switch instead of `--omit-url`, this way build commands could utilize the functionality. And if switch is not used, default.. Just a thought

    drush storybook:generate-all-stories --server-url=https://spiffy.url
    
  • πŸ‡ΊπŸ‡ΈUnited States pixelwhip

    The `--server-url` is already possible with Drush's `--uri` option. In my case, I need to omit the server url from the stories.json file completely so it can be set in the Storybook configuration.

    Example:

    drush storybook:generate-all-stories --uri=https://spiffy.url
    

    I discovered this recently when setting Storybook up with Tugboat for the Prototype theme ✨ Add tugboat integration Active . If you don't have the URI configured for Drush, the URL will end up being `http://default*`

  • Pipeline finished with Success
    3 months ago
    Total: 138s
    #125691
  • Status changed to Needs review 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States pixelwhip
  • πŸ‡ΊπŸ‡ΈUnited States bander2

    Looks like this does not omit the server url, it sets it to an empty string:

    "parameters":{"server":{"url":""}}
    

    Which gives me this error:

    URL constructor: /<my-server-id> is not a valid URL.
    

    When I manually delete the parameters section above, it works. So I think url needs to be completely omitted.

  • πŸ‡ΊπŸ‡ΈUnited States brayn7 Lexington, Ky

    @bander2 You have to patch the vendor dependency too.

                "e0ipso/twig-storybook": {
                    "Feature allow global server url": "https://github.com/e0ipso/twig-storybook/pull/11.patch"
                }
    

    This works great for me.

  • πŸ‡ΊπŸ‡ΈUnited States bander2

    brayn7, that works. Thanks!

  • First commit to issue fork.
  • Pipeline finished with Success
    about 2 months ago
    Total: 144s
    #169149
  • πŸ‡ΊπŸ‡ΈUnited States bradwade

    I tested the following patches on our website and they are working as expected... json stories are generated without a server URL parameter when `--omit-server-url` flag is provided .

                "drupal/storybook": {
                    "Issue #3424336: Fix ...": "patches/contrib/storybook-issue-3424336-mr-6.patch",
                },
                "e0ipso/twig-storybook": {
                    "Issue #10 Allow the server url to be set as a global parameter": "patches/contrib/twig-storybook-issue-10-pr-11.patch"
                }
    

    Since it seems multiple people have successfully tested, is the next step to create a new tag for e0ipso/twig-storybook which contains the already-merged-to-main issue 10 (https://github.com/e0ipso/twig-storybook/pull/11), then bump the version requirement here in composer.json so that new tag is pulled in as a dependency... then merge this MR 6?

    Sorry MR9 is showing in this thread. That was for another issue.

Production build 0.69.0 2024