Intended to be a standalone install?

[jbryson3]

Is this intended to be a standalone install - ie, any ember app could just ember install ember-cli-storybook and be up and running with storybook? If not, how should this be used with the storybook quick-start guide?

https://github.com/storybooks/storybook/tree/master/lib/cli
https://github.com/storybooks/storybook/blob/master/docs/src/pages/basics/guide-ember/index.md

Just doing an ember install with this repo, I ran into some troubles - such as there was no .storybook folder present.

[gabrielcsapo]

It should be as simple as running get-storybook and that should provision a starter application. Once storybookjs/storybook#4594 gets merged, that contains the docs needed to onboard with ember-cli-storybook. Running ember build or ember serve will create the needed files that should make storybook work right out of the box.

[gabrielcsapo]

Thoughts on this? @jbryson3

[jbryson3]

I see that your PR got merged. Something is not adding up for me - I haven't yet found the magic combination of commands to get storybook running on a new ember app.

Here is the process that has gotten me the closest so far:

From the quickstart guide

1. npx -p @storybook/cli sb init
   Problem: ember-cli-storybook is not added, and preview-head.html doesn't exist

2. ember install ember-cli-storybook
   Problem: package.json scripts are not modified automatically

Using the guide that just got merged

3. ember serve & start-storybook -p 9001 -s dist
   Problem: Errors from start-storybook "can't find react / react-dom"

4. npm i --save-dev react react-dom
   From here I tried a bunch of things (installing react/react-dom globally, installing babel-core) but still couldn't seem to get any closer.

info @storybook/react v3.4.11
info
info => Loading static files from: /Users/jbryson3/code/tmp/ember-three-five-zero/dist .
exec: fatal: No such remote 'origin'

info => Loading custom addons config.
info => Using default webpack setup based on "Create React App".
webpack built da5cb904e092ec6dab41 in 7479ms
Hash: da5cb904e092ec6dab41
Version: webpack 3.12.0
Time: 7479ms
                       Asset     Size  Chunks                    Chunk Names
    static/manager.bundle.js  3.52 MB       0  [emitted]  [big]  manager
    static/preview.bundle.js   889 kB       1  [emitted]  [big]  preview
static/manager.bundle.js.map  4.39 MB       0  [emitted]         manager
static/preview.bundle.js.map  1.08 MB       1  [emitted]         preview
                  index.html  1.21 kB          [emitted]
                 iframe.html  2.36 kB          [emitted]
  [64] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
 [125] /usr/local/lib/node_modules/@storybook/react/node_modules/global/window.js 232 bytes {0} [built]
 [240] /usr/local/lib/node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
 [259] /usr/local/lib/node_modules/@storybook/react/node_modules/core-js/fn/array/iterator.js 107 bytes {0} {1} [built]
 [267] /usr/local/lib/node_modules/@storybook/react/node_modules/airbnb-js-shims/index.js 40 bytes {0} {1} [built]
 [526] (webpack)/buildin/harmony-module.js 596 bytes {1} [built]
 [661] ./node_modules/@storybook/ember/dist/client/index.js 1.05 kB {1} [built]
 [671] multi /usr/local/lib/node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js /usr/local/lib/node_modules/@storybook/react/node_modules/@storybook/core/dist/client/manager/index.js 52 bytes {0} [built]
 [672] ./.storybook/addons.js 85 bytes {0} [built]
 [817] /usr/local/lib/node_modules/@storybook/react/node_modules/@storybook/core/dist/client/manager/index.js 423 bytes {0} [built]
[1190] multi /usr/local/lib/node_modules/@storybook/react/dist/server/config/polyfills.js /usr/local/lib/node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {1} [built]
[1191] /usr/local/lib/node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {1} [built]
[1192] (webpack)-hot-middleware/client.js?reload=true 7.77 kB {1} [built]
[1204] ./.storybook/config.js 301 bytes {1} [built]
[1264] ./stories .stories.js$ 183 bytes {1} [built]
    + 1259 hidden modules

ERROR in ./stories/index.stories.js
Module not found: Error: Can't resolve 'htmlbars-inline-precompile' in '/Users/jbryson3/code/tmp/ember-three-five-zero/stories'
 @ ./stories/index.stories.js 8:0-45
 @ ./stories .stories.js$
 @ ./.storybook/config.js
 @ multi /usr/local/lib/node_modules/@storybook/react/dist/server/config/polyfills.js /usr/local/lib/node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js
Child html-webpack-plugin for "index.html":

[gabrielcsapo]

what version of @storybook/ember are you using?

[gabrielcsapo]

Thank you for the verbose output, I can try and use this to make the quick-start more quick

[jbryson3]

Here are the versions that I was using, I tried to keep everything up to date. Let me know if I can test out later versions of anything.

npm -p @storybook/cli sb --version
6.4.1

grep @storybook/ember package.json
"@storybook/ember": "^4.0.2",

Sure thing, I'm happy to keep iterating until quick start is dead simple!

[ultimatemonty]

I was playing around with this for a bit this morning and was able to make some progress.

yarn add @storybook/cli --dev
ember install ember-cli-storybook
yarn run sb init

After storybook init make sure the the storybook and build-storybook commands run ember server

// in package.json
"storybook": "ember serve && start-storybook -p 9002 -s dist",
"build-storybook": "ember build && build-storybook -s dist"

Running yarn run storybook will then successfully start the ember dev server. It does not start the storybook server. If I kill ember server via ctrl-c only then will storybook fire up. Probably because ember-cli is grabbing stdinput. I'm not super great with bash so the only way I can see to make this work is the run ember server and start-storybook -p 9002 -s dist in separate terminal windows.

I was also able to get a component successfully displaying in Storybook.

// stories/index.stories.js
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import UiButton from '../app/components/ui-button';

storiesOf('UiButton', module)
  .add('with label', () => ({
    components: { UiButton },
    template: hbs`<UiButton @label="test" />`
  })
);

Thanks for putting the wiring together to get this working with Ember!

[csprocket777]

How did you get your components to successfully import into a storybook story? Does this work still?

[gossi]

@csprocket777 I'm not sure what you mean. Given this issue is quite old - can you open a new one and provide context?

[csprocket777]

Sorry for reopening things. I'm working with the latest storybook versions and am creating my own addon. When I import my Typescript based Ember addon in, I get compilation issues stating that it can't find @glimmer/component and such. From what i've read elsewhere, Storybook won't compile ember code to bring in the Typescript information because of the differing underlying compilation pipelines (Webpack VS Broccoli). Looking to see if this is in fact the case as you show it working above.