Help when building storybook and deploying on Vercel

[alexbjorlig]

I'm pretty new to Storybook, and hope you can help me out here.

I have msw-storybook-addon installed version 1.10.0, working fine running locally on my machine.

When I try to build the storybook with the storybook build command, everything also seems to work on Vercel. However, when I visit the environment I get this error:

[MSW] Failed to register a Service Worker for scope ('https://ui-seven-kappa.vercel.app/') with script ('https://ui-seven-kappa.vercel.app/mockServiceWorker.js'): Service Worker script does not exist at the given path.

Did you forget to run "npx msw init <PUBLIC_DIR>"?

Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/init

I tried adding

"msw": {
  "workerDirectory": "public"
}

But that did not seem to help.
On Vercel I'm using the Storybook framework preset, that lists storybook-static as "Output directory".

What is wrong with the above configuration 🧐?

[ben-hamel]

I'm also having same exact issue when deploying to GitLab pages. Everything works when I build locally and run through http server, or the live server plugin in VsCode. I can download the build file from the pipeline, and run it the same way. The page will deploy but won't find the MockServiceWorker.js. Never had issues with storybook 6.5 and this plugin. But we upgraded to sb7 and now can't get this to deploy properly.

[ben-hamel]

also, my Vite has a base url, that might be causing issue. www.example.com/mockServiceWorker.js will show mock service worker route, but www.example.com/my-app/mockServiceWorker.js wont. @alexbjorlig do you have something like this in your vite.config setup?

[jimsheen]

@alexbjorlig @ben-hamel

adding this to .storybook/main.js worked for me

  staticDirs: ['../public'],

https://storybook.js.org/docs/7.4/configure/images-and-assets

I believe you can also do this in package.json scripts, although I didn't try

"storybook": "storybook dev -p 6006 -s ../public"

Hope that helps!

[alexbjorlig]

Hi @jimsheen , I troed adding staticDirs: ['../public'] to .storybook/main.js, but this just gives me this error at built-time in Vercel:

Error: Failed to load static files, no such directory: /vercel/path0/public

[ben-hamel]

@alexbjorlig What version of Storybook are you running? webpack or vite?

[alexbjorlig]

@ben-hamel

vite

Storybook Environment Info:

  System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 10.2.5 - ~/.nvm/versions/node/v18.17.1/bin/npm <----- active
    pnpm: 8.12.0 - ~/.nvm/versions/node/v18.17.1/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Safari: 17.3
  npmPackages:
    @storybook/addon-essentials: ^7.6.12 => 7.6.12 
    @storybook/addon-interactions: ^7.6.12 => 7.6.12 
    @storybook/addon-links: ^7.6.12 => 7.6.12 
    @storybook/addon-storysource: ^7.6.12 => 7.6.12 
    @storybook/addon-svelte-csf: ^4.1.0 => 4.1.0 
    @storybook/addon-themes: ^7.6.12 => 7.6.12 
    @storybook/blocks: ^7.6.12 => 7.6.12 
    @storybook/jest: ^0.2.3 => 0.2.3 
    @storybook/svelte: ^7.6.12 => 7.6.12 
    @storybook/sveltekit: ^7.6.12 => 7.6.12 
    @storybook/test: ^7.6.12 => 7.6.12 
    @storybook/test-runner: ^0.16.0 => 0.16.0 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    msw-storybook-addon: ^1.10.0 => 1.10.0 
    storybook: ^7.6.12 => 7.6.12

[SalahAdDin]

@alexbjorlig @ben-hamel

adding this to .storybook/main.js worked for me

  staticDirs: ['../public'],

https://storybook.js.org/docs/7.4/configure/images-and-assets

I believe you can also do this in package.json scripts, although I didn't try

"storybook": "storybook dev -p 6006 -s ../public"

Hope that helps!

Yeah, it works, but then it breaks custom fonts to work.

We have the following setup derived from this issue:

staticDirs: [
    {
      from: "../public",
      to: "/public",
    },
    { from: "../public/fonts", to: "/fonts" },
  ],

With this, Storybook is unable to find the mockServiceWorker.js file.

So, let's try:

staticDirs: [
  "../public",
    { from: "../public/fonts", to: "/fonts" },
  ],

It does not work.

If we use staticDirs: ["../public"], , mock service worker works, but font's does not work!!!

What can we do here?

Storybook Environment Info:

  System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.4 - /usr/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-a11y: 7.6.17 => 7.6.17 
    @storybook/addon-essentials: 7.6.17 => 7.6.17 
    @storybook/addon-interactions: 7.6.17 => 7.6.17 
    @storybook/addon-links: 7.6.17 => 7.6.17 
    @storybook/addon-onboarding: 1.0.11 => 1.0.11 
    @storybook/addon-storysource: 7.6.17 => 7.6.17 
    @storybook/addon-themes: 7.6.17 => 7.6.17 
    @storybook/blocks: 7.6.17 => 7.6.17 
    @storybook/nextjs: 7.6.17 => 7.6.17 
    @storybook/react: 7.6.17 => 7.6.17 
    @storybook/test: 8.0.0-alpha.16 => 8.0.0-alpha.16 
    @storybook/theming: 7.6.17 => 7.6.17 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1 
    storybook: 7.6.17 => 7.6.17 
    storybook-addon-pseudo-states: 2.1.2 => 2.1.2 
    storybook-addon-rtl: 1.0.0 => 1.0.0 

[SalahAdDin]

@alexbjorlig
The following works for mocks, but does not work for fonts :') :

  staticDirs: [
    {
      from: "../public",
      to: "/",
    },
    { from: "../public/fonts", to: "fonts" },
  ],

This addon always looks the mock on the URL root.

I tried following this thread:

initialize({
  onUnhandledRequest: "warn",
  serviceWorker: {
    url: "/public/mockServiceWorker.js",
  },
});

It enables the mock but doesn't intercept any request:

[MSW] Cannot intercept requests on this page because it's outside of the worker's scope ("http://localhost:6006/public/"). If you wish to mock API requests on this page, you must resolve this scope issue.

- (Recommended) Register the worker at the root level ("/") of your application.
- Set the "Service-Worker-Allowed" response header to allow out-of-scope workers.

[7alip]

Haven't tried for Vercel but I was getting the same issue in my Docker container. The following setup helped.

// preview.tsx
initialize({
    serviceWorker: {
        url: './mockServiceWorker.js',
    },
});

// main.ts
    staticDirs: [
        { from: '../public', to: 'public' },
        { from: '../public/mockServiceWorker.js', to: 'mockServiceWorker.js' },
        { from: '../assets/fonts', to: 'assets/fonts' }, // Local fonts
    ],

[yannbf]

Hey there! I actually publish a Storybook for a personal project in both Vercel and Netlify and I have no issues with MSW there.

First of all, you need to make sure MSW is available via staticDirs in Storybook's config:

import { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  // ...
  staticDirs: ['../public'], // this must match where your MSW file is at
}
export default config

Vercel

I deploy the app in https://mealdrop.vercel.app and Storybook in https://mealdrop.vercel.app/storybook, and the configuration I use is:

// ./vercel.json

{
  "redirects": [
    {
      "source": "/storybook",
      "destination": "/storybook/"
    }
  ],
  "rewrites": [
    {
      "source": "/storybook",
      "destination": "/storybook"
    },
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ],
  "github": {
    "silent": true
  }
}

Netlify

I deploy the app in https://mealdrop.netlify.app and Storybook in https://mealdrop.netlify.app/storybook, and the configuration I use is:

// ./public/_redirects

/storybook /storybook 200
/* /index.html 200