Aurelia with storybook

[bemon]

Hi,

Im trying to make aurelia work with storybook. I tried to initialize aurelia with webpack, but when storybook triest to load aurelia app i get this message:

 in D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' in 'D:\SourceCodes\storybook\node_modules\aurelia-bootstrapper-webpack\node_modules\aurelia-loader-webpack\dist\commonjs'
 @ D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js 154:23-64
 @ D:/SourceCodes/storybook/node_modules/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js
 @ D:/SourceCodes/storybook/app/aurelia/dist/client/preview/render.js
 @ D:/SourceCodes/storybook/app/aurelia/dist/client/preview/index.js
 @ D:/SourceCodes/storybook/app/aurelia/dist/client/index.js
 @ ./.storybook/config.js
 @ multi D:/SourceCodes/storybook/lib/core/dist/server/config/polyfills.js D:/SourceCodes/storybook/lib/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Webpack config file:

const path = require('path');
const AureliaWebPackPlugin = require('aurelia-webpack-plugin');

module.exports = {
  entry: {
    app: [],
    aurelia: [
      'aurelia-bootstrapper-webpack',
      'aurelia-polyfills',
      'aurelia-pal',
      'aurelia-pal-browser',
      'aurelia-binding',
      'aurelia-dependency-injection',
      'aurelia-event-aggregator',
      'aurelia-framework',
      'aurelia-history',
      'aurelia-history-browser',
      'aurelia-loader',
      'aurelia-loader-webpack',
      'aurelia-logging',
      'aurelia-logging-console',
      'aurelia-metadata',
      'aurelia-path',
      'aurelia-route-recognizer',
      'aurelia-router',
      'aurelia-task-queue',
      'aurelia-templating',
      'aurelia-templating-binding',
      'aurelia-templating-router',
      'aurelia-templating-resources',
    ],
  },

  output: {
    // (2)
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist',
    filename: '[name].js',
    chunkFilename: '[name].js',
  },

  resolve: {
    // (3)
    extensions: ['.ts', '.js'],
    modules: ['src', 'node_modules'],
  },

  module: {
    // (4)
    rules: [
      { test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.ts$/i, use: 'ts-loader' },
      { test: /\.html$/i, use: 'html-loader' },
    ],
  },

  plugins: [
    new AureliaWebPackPlugin({ noWebpackLoader: true, aureliaApp: undefined }), // (5)
  ],
};

Full repo source code to clone is at https://github.com/bemon/storybook if anyone wants to take a look and try run.

I dont know how exacly configure webpack to proper load aurelia modules.

[doktordirk]

seems to be in there plain aurelia project. so, just use aurelia-cli do make one for you, same as some other frameworks there

[bemon]

I've configured storybook webpack.config.js to add aurelia webpack plugin like this

  plugins: [...config.plugins, new AureliaWebPackPlugin.AureliaPlugin()]

But now when building webpack i got this error:

ERROR in ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
Module not found: Error: Can't resolve 'main' in 'D:\SourceCodes\storybook\examples\aurelia-kitchen-sink\node_modules\aurelia-webpack-plugin\runtime'
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry D:/SourceCodes/storybook/lib/core/dist/server/config/polyfills.js D:/SourceCodes/storybook/lib/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Should I add any additional config info ? Default aurelia webpack config dont have any specific stuff. I think this error is only thing that prevents me to run aurelia app inside storybook. Any ideas ?

[doktordirk]

try .AureliaPlugin({includeAll: "src"}) https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options

[baerrach]

Is anyone actively working on this?

[EisenbergEffect]

Not on our core team at least. We'd love someone to help out with this, particularly for Aurelia 2.

[brandonseydel]

Au2 storybook is actively getting worked on. Prototype should be done this week.

[bemon]

@brandonseydel can you give link to repo ?

[brandonseydel]

https://github.com/brandonseydel/storybook it is working actually. Just needs some cleanup to make everything nicer.

[brandonseydel]

I pushed another version which handles global container/registration/component registration. This also allows adhoc registration per story past the original. One could register a plugin in the config.ts and then register custom component in story for HMR.

[romain-preston]

@brandonseydel We are really interested in your branch ! Any update :) ?

[brandonseydel]

I will nudge storybook authors some more. We want it for our alpha release, so it should be rtm soon.

[brandonseydel]

I think i will actually open a PR into them so the back and forth will become public. I will link it when complete.

[romain-preston]

Looking forward to reading these back and fourth!

[brandonseydel]

https://github.com/storybookjs/storybook/pull/8199

[bemon]

@brandonseydel any progress with storybook ?

[weoreference]

@brandonseydel any progress with storybook ?

@brandonseydel

[brandonseydel]

It is out already on NPM (au2). https://www.npmjs.com/package/@storybook/aurelia

[elimt]

It is out already on NPM (au2). https://www.npmjs.com/package/@storybook/aurelia

@brandonseydel Any instructions on how to set this up?

[jljabben]

@brandonseydel Any instructions on how to set this up?

@elimt I found an example on https://github.com/storybookjs/storybook/tree/master/examples/aurelia-kitchen-sink that I'll try out.

But some type of guide on how to set this up would be helpful. The npx -p @storybook/cli sb init command cannot detect the project type and manually setting the project type with npx -p @storybook/cli sb init --type aurelia doesn't work too.

In https://github.com/storybookjs/storybook/blob/next/lib/cli/src/project_types.ts, there is no type for aurelia. Aurelia is only a "supported framework". What type should it be? @brandonseydel

[brandonseydel]

@jenslw I will try to get a small guide set up and I will investigate the --type not working with SB

[jljabben]

@jenslw I will try to get a small guide set up and I will investigate the --type not working with SB

After experimenting a bit with the example aurelia-kitchen-sink, I found out that @storybook/aurelia works only with Aurelia 2 applications because it depends on the aurelia npm package used in new Aurelia 2 apps only. Is this correct?

[weoreference]

@jenslw I will try to get a small guide set up and I will investigate the --type not working with SB

Thank you @brandonseydel

[brandonseydel]

Yes this is au2 only.

Au2 storybook is actively getting worked on. Prototype should be done this week.

[vkiranmaniya]

@brandonseydel Any updates on Aurelia's storybook. I made few changes and it's opening storybook. unfortunately, It doesn't show up the example button component.

[Infuser]

I am also interested in this.

I have managed to get the go ahead to use AU2 at my work against all odds but we need it working with storybook

[Infuser]

@EisenbergEffect anyone have information on this I am trying to get storybook Aurelia2 working but it looks broken to me.

issues with typings and something about reflect metadata being imported twice

[bigopon]

A commit that relax the strictness around metadata has been merged. Can you try again @infuser