Vite + Rails + Storybook

[rangerscience]

Hi all, trying to get Rails with Vite playing nice with Storybook with Webpack. It's a whole bunch of "that might work BUT" problems. Storybook only has server-side rendering working when it's using Webpack, and you need to use the server-side rendering if you want to, say, render your Rails ERB/SLIM templates where Storybook can see them...

Storybook lets you load in a CSS file from a server in their preview.js very simply:

import '../public/vite-dev/assets/style-BFsd3Z4O.css'

This works... but every time the asset gets a new fingerprint, it breaks. If there's a way to have Vite also produce a file with a static name, like style.css... I haven't been able to find it, either inside Vite, or inside the Rails asset pipeline - I can't even find a hook for the pipeline to stick in some JS function to just do it myself.

Next - Storybook does let you get in there and mess around with the Webpack config in main.js:

/** @type { import('@storybook/server-webpack5').StorybookConfig } */

const config = {
  stories: [ /* ... */ ],
  addons:  [ /* ... */ ],
  framework: {
    name: "@storybook/server-webpack5",
    options: {},
  },
  webpackFinal: async (config, sb) => {
    const vite = await import('vite');
    const viteConfig = await vite.resolveConfig()
  },
};

But this throws a TypeError: Cannot read properties of undefined inside of Module.resolveConfig (.../chunks/dep-CDnG8rE7.js:66069:27, so not a helpful location...?), and even if I can get the Vite config, it's not clear how I'd actually get the relevant information from Vite into Webpack.

Lastly, Vite (in Rails) makes the CSS available through, say, http://localhost:3000/vite-dev/entrypoints/style.css, but Storybook both a) doesn't really have a good way to load this, and b) the notional way you're supposed to then load that (.preview-head.html) doesn't seem to work.

I realize this is crossing a lot of projects - that's making a huge PITA to find help, since people tend to just point me at the other project - so, any ideas, or tips, or links to docs for the Vite side of things? I'm poking around, but honestly I can barely tell where to start.

[rangerscience]

Okay, I figured out a chunk of it - horray for Vite's manifest being somewhere I can find it!

// .storybook/main.js
const manifest = require("../public/vite-dev/.vite/manifest.json")
const config = {
  // ...
    webpackFinal: async (config) => {
    const manifest = await require("../public/vite-dev/.vite/manifest.json")

    const styleFile = `../public/vite-dev/${manifest["entrypoints/style.css"].file}`
    // const jsFile = `../public/vite-dev/${manifest["entrypoints/application.js"].file}`

    config.resolve.alias = {
      ...config.resolve.alias,
      "@assets/style.css": styleFile,
      // "@assets/application.js": jsFile,
    }
    return config
  } 
};

// .storybook/preview.js

import "@assets/style.css"

This doesn't seem to work for the JS (got some odd errors, but, punting on that for now either way), and, it ofc doesn't work for icon assets and the like (which I have another solution for, except that then that solution doesn't work with storybook build, which is unfortunate since the entire point of all of this is to use Chromatic with my Rails projects...). But! Progress!