search

ZachJW34 / nx-plus

Collection of Nx Community Plugins
MIT License
302 stars 51 forks source link

Add Storybook support #145

Open mehrad-rafigh opened 3 years ago

mehrad-rafigh commented 3 years ago

Description

I would to use storybook with nx-plus and vue

Motivation

Nx supports storybook for angular and react

Suggested Implementation

We can take inspiration from nx and the way they implemented the schematics and builder

mehrad-rafigh commented 3 years ago

@BuckyMaler @ZachJW34 I would like to add the ability. Is that ok?

ZachJW34 commented 3 years ago

@mehrad-rafigh Go for it! Reach out if you have any questions.

LuckeeDev commented 3 years ago

@mehrad-rafigh any update on this? Need any help in developing the feature?

mehrad-rafigh commented 3 years ago

@LuckeeDev I have not found the time to develop this. You can grab this issue and start programming :)

LuckeeDev commented 3 years ago

@mehrad-rafigh yes, I can take a look at it!

JoA-MoS commented 3 years ago

do you have a repo that you have successfully configure storybook for a vue library in nx that can be used as a template for future development?

danielquintero commented 3 years ago

I am currently working on a PoC to migrate to Nx and possibly convince of its benefits but this is a show stopper, @LuckeeDev any help needed, are you currently working on this?

LuckeeDev commented 3 years ago

@danielquintero sadly, I've not had the time to work on this :(

SvenBudak commented 3 years ago

Is there an estimate if and when this feature will be available? I would like to do something for it myself, but my skills are not enough.

nidomiro commented 3 years ago

The solution is pretty easy (for nuxt), but it took me several hours to get there.

  1. Install nuxt/Storybook as mentioned here: https://storybook.nuxtjs.org/getting-started/installation/
  2. Add the following to your nuxt-targets in workspace.json|angular.json|project.json (replace the value of cwd with the path of your app): 
    "storybook": {
  "executor": "@nrwl/workspace:run-commands",
  "options": {
    "cwd": "apps/cockpit-app",
    "command": "npx nuxt storybook --ci",
    "parallel": false
  }
},
"build-storybook": {
  "executor": "@nrwl/workspace:run-commands",
  "options": {
    "cwd": "apps/cockpit-app",
    "command": "npx nuxt storybook build",
    "parallel": false
  }
}
  3. Add "build-storybook" to tasksRunnerOptions.default.options.cacheableOperations in nx.json
  4. If you want to have your storybook-builds in dist you can achieve that with -o. In my case I replaced the command of build-storybook with npx nuxt storybook build -o ../../dist/apps/cockpit-app-storybook
TrayHard commented 2 years ago

Please do it someone, who has the time for it, really cool and important thing