Defines a PhoenixStorybook route.

It expects the path the storybook will be mounted at and a set of options.

This will also generate a named helper called live_storybook_path/2 which you can use to link directly to the storybook, such as:

<.link href={live_storybook_path(conn, :root)} />

Note that you should only use the href attribute to link to the storybook, as it has to set its own session on first rendering. Linking with patch or navigate will not work.

Options

• :backend_module - Required - Name of your backend module.
• :live_socket_path - Configures the socket path. It must match the socket "/live", Phoenix.LiveView.Socket in your endpoint.
• :assets_path - Configures the assets path. It must match the storybook_assets in your router. Defaults to "/storybook/assets".
• :session_name - Configures the live session name. Defaults to :live_storybook. Use this option if you want to mount multiple storybooks in the same router.
• :as - Allows you to set the route helper name. Defaults to:live_storybook.
• :pipeline - Set to false if you don't want a router pipeline to be created. This is useful if you want to define your own :storybook_browser pipeline, or if you mount multiple storybooks, in which case the pipeline only has to be defined once. Defaults to true.
• :csrf - Set to false if your LiveView socket is configured without csrf, then the JS code will attach to the socket without providing a csrf token. Defaults to true.

Usage

# lib/my_app_web/router.ex
use MyAppWeb, :router
import PhoenixStorybook.Router
...

scope "/" do
  pipe_through :browser
  live_storybook "/storybook", backend_module: MyAppWeb.Storybook
end

Note that it is not possible to use this macro in a scope with a path different from /.

Defines routes for PhoenixStorybook static assets.

Static assets should not be CSRF protected. So they need to be mounted in your router in a different pipeline than storybook's.

It can take the path the storybook assets will be mounted at. Default path is "/storybook/assets".

Usage

# lib/my_app_web/router.ex
use MyAppWeb, :router
import PhoenixStorybook.Router
...

scope "/" do
  storybook_assets()
end