feat: start storybook in same process as dev server

tobiasdiez commented 1 month ago

Instead of invoking the storybook cli, we now start the storybook dev server in the same process as the nuxt dev server. This has the advantage that we don't need to spawn a second nuxt instance, improving preformance and reducing complexifty.

Fixes https://github.com/storybook-vue/storybook-nuxt/issues/59 and fixes https://github.com/nuxt-modules/storybook/issues/610 and fixes https://github.com/nuxt-modules/storybook/issues/635 and fixes https://github.com/nuxt-modules/storybook/issues/475.

netlify[bot] commented 1 month ago

Deploy request for nuxt-storybook pending review.

Visit the deploys page to approve it

Name	Link
Latest commit	20f56adcf045d30d915d87d2da2104c029edcd5c

blowsie commented 3 weeks ago

This looks awesome! and essential for me to continue using the plugin 😄

mehcode commented 2 weeks ago

Super excited to see this work. Is there something blocking this that needs help resolving? Looking to find somewhere to contribute if I can.

tobiasdiez commented 2 weeks ago

@mehcode Thanks for the offer. In it's current state of this PR, if you run pnpm dev and look at the browser dev console, you see errors that iframe.html?.... is not found. It seems to be that the wrong dev server is called (the nuxt server, not the storybook one). If you have a bit of spare time, you could try to figure out why the wrong address is used for this call.

mehcode commented 2 weeks ago

I'll take a look.

mehcode commented 2 weeks ago

@tobiasdiez When I run this branch (after rebasing to main) it appears to work. I do get a couple of errors logged in the console, but things seem to be working.

Uncaught (in promise) FetchError: [GET] "/_nuxt/builds/meta/dev.json": 404 Not Found
    at async $fetch22 (ofetch.js?v=a16ba4e7:275:15)

chunk-R4CAHNZ3.js?v=a16ba4e7:521 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

mehcode commented 2 weeks ago

The validateDOMNesting issue seems to be pre-existing and only for the configure mdx page.

The other error goes away if you uncomment the preview proxies.

tobiasdiez commented 2 weeks ago

Thanks a lot for having a look. It is indeed working now (very rarely I still got an "iframe" not found error in the console but everything seemed to work fine...so who cares ;-) )

blowsie commented 1 week ago

Today I updated storybook and nuxt storybook, could this change be related?

nitro] √ You can preview this build using node .output/server/index.mjs ╭─────────────────────────────────────────────────────╮ │ │ │ Storybook 8.1.9 for @storybook-vue/nuxt started │ │ 1.81 s for manager and 23 s for preview │ │ │ │ Local: http://localhost:3010/ │ │ On your network: http://10.33.1.242:3010/ │ │ │ ╰─────────────────────────────────────────────────────╯ X [ERROR] The entry point "vue" cannot be marked as external

D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm\@storybook+cli@8.1.9_react-dom@18.3.1_react@18.3.1\node_modules\@storybook\cli\bin\index.js:23 throw error; ^

Error: Build failed with 1 error: error: The entry point "vue" cannot be marked as external at failureErrorWithLog (D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm\esbuild@0.21.5\node_modules\esbuild\lib\main.js:1472:15) at D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm\esbuild@0.21.5\node_modules\esbuild\lib\main.js:945:25 at D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm\esbuild@0.21.5\node_modules\esbuild\lib\main.js:1353:9 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errors: [Getter/Setter], warnings: [Getter/Setter] }

Node.js v21.7.1

blowsie commented 1 week ago

Can be tracked here https://github.com/nuxt-modules/storybook/issues/656

nuxt-modules / storybook