What environment are you using with this theme?

I'm on Windows and using DrupalVM https://www.drupalvm.com/ for local development.

I could proxy the browsersync with these settings

mix.browserSync({
  proxy: proxy.proxy,
  files: ['assets/js/**/*.js', 'assets/css/**/*.css', 'assets/components/**/*.css', 'assets/components/**/*.js', 'src/components/**/*.twig'],
  stream: true,
  host: '192.168.89.89',
  open: false,
  cors: true,
  online: true,
  port: 8000,
  https: {
    // allow Browsersync to access key: sudo chmod o+x /etc/ssl/private
    key: '/home/vagrant/dp8.key',
    cert: '/home/vagrant/dp8.crt',
  },
  watchOptions: {
    usePolling: true,
    interval: 500
  }
});

But could not proxy storybook. Could please let me know how do you connect to the links generated by storybook?

I have tried to add start-storybook --ssl-cert /home/vagrant/dp8.crt --ssl-key /home/vagrant/dp8.key --https -h 192.168.89.89 -p 9009 --debug-webpack and connect to it with https://192.168.89.89:9009 but it only proxy the localhost and not the network. Have tried with and without the --https flags and all different variants I could find on the internet like -h 0.0.0.0.

The problem is that it only changes the localhost and not the network host.

Local:            https://192.168.89.89:9009
On your network:  https://10.0.2.15:9009

The vagrant IP 10.0.2.15 is not accessible from guest windows.

Do you know a way around this?

Thanks,
lexsoft

Comments

lexsoft created an issue. See original summary.

doxigo’s picture

doxigo commented

Your setup seems quite complex and I'm on Mac myself, haven't used DrupalVM as well but what you want to do is solely related to StorybookJS itself and the overriding of its default configurations that seems like you're trying to do

did you manage to get the storybook running without passing any extra parameters?

lexsoft’s picture

lexsoft commented

By default it generates:

   Local:            http://localhost:38481/ 
   On your network:  http://10.0.2.15:38481/

My issue is that I need to access it on my network since I'm running everything in a local VM and could not find where to change the IP for On your network.

doxigo’s picture

doxigo commented

I haven't really done that before, so not sure if I can help you here, I suggest reading on the https://storybook.js.org/ official docs to see how to achieve that

yi_jiang’s picture

yi_jiang commented

i had the similar problem on lando.

doxigo’s picture

doxigo commented

seems like you can't really that easily proxy storybook on anything, me and a friend of mine had the same problems with Lando

yi_jiang’s picture

yi_jiang commented

I think you could lock a stable port to storybook, like I did. then define a proxy for that in lando yml.
However I havnt really got lando to create subtheme yet, so I cant really test it for next step.

lexsoft’s picture

lexsoft commented

I have opened an issue on storybook GitHub
https://github.com/storybookjs/storybook/issues/12865

Describe the bug
Storybook --host attribute it changes localhost where it should change network host.

start-storybook -h 192.168.89.89 -p 9009
Local:            http://192.168.89.89:9009
On your network:  http://10.0.2.15:9009

The expected result should be like the one bellow

Local:            http://localhost::9009/ 
On your network:  http://192.168.89.89:9009

Have anyone tried Nginx with storybookjs ?

doxigo’s picture

doxigo commented

Great work on GH issue, I'll ping a friend of mine here to see if he has experience with this

lexsoft’s picture

lexsoft commented

Got it working with Nginx!
Add a port in package.json for "storybook" "storybook": "start-storybook --ci -p 9009"
Create nano /etc/nginx/sites-enabled/local.storybookjs.conf, you must be root to be able to do this.

server {
  server_name                         local.storybookjs.local;
  location / {
    # StoryBookJS
    proxy_pass                      http://localhost:9009;
    proxy_set_header                Upgrade $http_upgrade;
    proxy_set_header                Connection "Upgrade";
  }
}

Restart Nginx server with service nginx restart

Run npm run crazy in the subtheme.

Add the local.storybookjs.local in windows hosts file to be able to access it from your browser, more info about this at http://docs.drupalvm.com/en/latest/getting-started/installation-windows/...

Access the local domain in your browser http://local.storybookjs.local and it works :)

I am getting this error when I play around with it:

Twig.Error {message: "You are using Twig.js in sync mode in combination with async extensions.", name: "TwigException", type: "TwigException", file: undefined}
doxigo’s picture

doxigo commented

Well done @lexsoft, thanks for sharing the solution

yi_jiang’s picture

yi_jiang commented

I run it under apache within a aws ec2, I just did same as you, but I ported to 3004. so in my aws security group, I can only open a 3000 -3004 range along with BS.

I think I could get lando to run, but just need a bit of time.

doxigo’s picture

doxigo commented
Status: Active » Closed (works as designed)

We need a proper documentation tool, I'll try to set up something this week or next and add these type of tips, I'm closing the task, thanks to both of you

yi_jiang’s picture

yi_jiang commented

Hey, just coming back this, I got lando working for a simple solution.

https://github.com/iijiang/drupal9_bootstrap_storybook_lando/

There could be another solution of installing node as separated service, but the example I created should work. altho bootstrap config.js doesnt really do anything. some conf changes I did in webpack.mix.js and package.json.

I still think the node libs are too big :)

doxigo’s picture

doxigo commented

Fantastic work Yi, I'll have to go through your fork and see what magic you're doing but can't really do it for the next week or so, will see if we can improve something here and well done 👏

yi_jiang’s picture

yi_jiang commented

yes, give me yell for any questions. definitely need some improvement.