Search code examples
sveltevitestorybooksveltekit

Running Storybook as path in main Svelte/Kit app

Description of problem, and expectation

Let's say you want to hypothetically run Storybook alongside your Svelte/Kit app in which two Vite servers are expected to run:

  • localhost:<port> --> Main app
  • localhost:<port> --> Storybook app

This is the default expectation of running one alongside the other. However, what if you have a local domain configured mydomain.local which runs on port 80, and you want Storybook to be accessible via a path from the main app? For example: mydomain.local/pattern-library

There are two methods one might initially think to take to solve this, either a redirect or a proxy. But there is a definable difference between the two explained in this SO answer:

With a redirect the server tells the client to look elsewhere for the resource. The client will be aware of this new location. The new location must be reachable from the client. A reverse proxy instead forwards the request of the client to some other location itself and sends the response from this location back to the client. This means that the client is not aware of the new location and that the new location does not need to be directly reachable by the client.

Attempt

Not blocking, but out of curiosity I wanted to accomplish this configuration. I first tried to create a reverse proxy using Vite's server config settings:

Proxy

// package.json
{
    ...
    "scripts": {
        ...
        "storybook:dev": "storybook dev -c .storybook -p 8081 --no-open",

// vite.config.ts

export default defineConfig({
    plugins: [ sveltekit() ],
    server: {
        host: 'mydomain.local',
        port: 80,
        strictPort: true,
        proxy: {
            // '/pattern-library': 'http://mydomain.local:8081'
            '/pattern-library': {
                target: 'http://localhost:8081',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/pattern-library/, '')
                // hostRewrite: 'mydomain.local',
                autoRewrite: true
            }
        }
    },

Starting my main application instance with variations of this config resulted in either Cannot GET /pattern-library or with the hostRewrite uncommented- 404 errors for /sb-* dependencies. For example:

Error: Not found: /sb-addons/essentials-viewport-4/manager-bundle.js
    at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:394:13)
    at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:243:5)
    at #options.hooks.handle (/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
    at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:240:40)

Svelte Redirect

Created a new route to handle the redirect:

// routes/pattern-library/+page.server.js

import { redirect } from '@sveltejs/kit';

export function load() {
    throw redirect(307, 'localhost:8081');
}

This also results in a 404:

Request URL: http://mydomain.local/:8081
Request Method: GET
Status Code: 404 Not Found
Remote Address: 0.0.0.0:80
Referrer Policy: strict-origin-when-cross-origin

Question

As Svelte/Kit 1.0 stable released fairly recently, I don't have much to go on with the new architecture and its synergy with Vite. It seems that some variation of the above should accomplish this, but maybe I'm missing something. Could someone provide some insight into how to accomplish this?

  • Does this only work with the compiled Storybook build?
  • Can this be accomplished running Storybook dev?

TIA!

Solution

  • I reached out to the Storybook team on Discord and was able to reach a conclusion.

    The paths on Storybook router are statically defined and cannot be updated through viteFinal configs. Therefore, it's currently not possible to accomplish this locally.

    However, it may be possible to accomplish a similar feature using containers; Storybook would have to exist as a standalone app though and therefore would not be integrated as this post attempted to attain.

    From SB team:

    I actually don't think it's possible to change the path of Storybook, not even in viteFinal. @private isn't the paths on the router like /iframe.html statically defined in core-server?

    I don't think anything like that is possible, no. Feel welcome to look into the code, paths like /iframe.html are hardcoded for sure.