Use storybook's buildDevStandalone to start dev server

[tobiasdiez]

Currently the module uses the storybook cli to start the dev server in a new process. I think its more flexible and convenient to use storybooks buildDevStandalone for this. You can have a look at https://github.com/JabRef/JabRefOnline/blob/main/modules/storybook.ts on how this can be done.

[ineshbose]

Similar usage: nuxt-modules/tailwindcss#793 (comment)

[lud-hu]

Hi @tobiasdiez ,

since none of the available storybook modules seem to work properly I tried to get your solution up and running but I'm running into this error:

 ERROR  EISDIR: illegal operation on a directory, read                                                                                                                      8:49:45 AM

  at Object.readSync (node:fs:744:3)
  at tryReadSync (node:fs:444:20)
  at readFileSync (node:fs:490:19)
  at jiti (node_modules/jiti/dist/jiti.js:1:254438)
  at node_modules/@storybook/core-server/dist/index.js:51:2268
  at async getPreviewBuilder (node_modules/@storybook/core-server/dist/index.js:51:2172)
  at async Promise.all (index 0)
  at async buildDevStandalone (node_modules/@storybook/core-server/dist/index.js:119:2418)
  at async startStorybookServer (modules/storybook.ts:22:10)
  at async modules/storybook.ts:88:31

Do you have an idea what the problem might be? I cannot manage to debug it... :(

[tobiasdiez]

That points to https://github.com/storybookjs/storybook/blob/5428db705fbb312bb3712b5d2a4fdc072bb17c14/code/lib/core-server/src/utils/get-builders.ts#L17, right? Do you have the right builder package installed?

[lud-hu]

Thanks @tobiasdiez !
I really don't know why, but after switching over from

framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },

to

framework: {
    name: '@storybook/nuxt',
    options: {},
  },

solved this particular issue.

Now I at least get the story rendered but it seems like there is no styling applied and e.g. <NuxtIcon /> is not rendered as well. Is there anything more to take into account in your solution then:

• Adding pages/_storybook/external-iframe.vue
• Adding modules/storybook.ts
• Installing storybook-vue-addon and registering it as nuxt module
• Add a story as e.g. Button.stories.vue and register it in pages/_storybook/external-iframe.vue

?