Giters

emulsify-ds / emulsify-drupal

Drupal theme built with Storybook and Webpack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Accessing Storybook in Lando

cruno91 opened this issue · comments

commented

emulsify version (see releases): 3.0.2

node version: v14.18.1

npm (or yarn) version: yarn 1.22.17

What you did:

  1. Ran through Drupal Installation instructions
  2. Ran through Hot Reload Drupal instructions
  3. Ran lando yarn develop

What happened:

Storybook build succeeded, but it was inaccessible from tested domains/ports:

Problem description:

I may be getting confused about using Storybook vs what Hot Reload Drupal instructions are for. From what I understand, updating a component and saving the file with Hot Reload on means it will trigger the change to appear in Drupal and Storybook.

However, with the site built in a Lando (which is mentioned in Hot Reload doc), it's unclear how to access Storybook.

commented

Apologies if this is not the appropriate place to pose this question. I did try to join the Slack but after the first "Welcome to Emulsify" email I did not get a slack invite (checked spam).

commented

Hello cruno91.
On emulsify you should run node in host.... so npm or yarn shouldn't be in a lando container.
You will run lando drush... but not lando npm run... instead npm run.
I'm using emulsify and I'm pretty satisfied...

commented

Hi @cruno91 I've never actually tried to access Storybook through the lando URL, I always just pull up localhost:6006 directly on my machine (by running yarn develop from the machine, not from within lando.)

I also don't have info on Hot reloading in Drupal. Those docs were provided by a community member (We don't do that at 4K. We just develop our theme in Storybook, and then Drupal just maps data into our templates, so we only really need hot-reloading in Storybook, which it does by default)

One of the benefits to developing the component library outside of the Drupal installation is that you could have frontend developers who have never even heard of Drupal working on the components, without having to have php, a database, or anything else Drupal requires, running on their machine. They can just npm run develop and work on the frontend code in isolation.

I hope that helps. I'm going to close this issue for now, but if you still have unresolved issues, or an alternate use-case, feel free to re-open.

commented

Hi @ModulesUnraveled, I totally understand that this is not a supported feature/issue for Emulsify Drupal.

I was able to resolve the issue by adding port forwarding to my Lando configuration for the container service with Drupal & Emulsify in it with the following:

services:
  appserver:
    ...
    overrides:
      ...
      ports:
        - 6006:6006
        - 32778:32778

Now Storybook is accessible at http://d9.lndo.site:6006 and Hot Reload works with BrowserSync at http://d9.lndo.site:32778 after running lando yarn develop.

I would also like to respond to @marceldobrica comment as to the reasoning for having yarn and npm in the Lando containers:
This is a development environment that is meant to support upwards of 30 developers. To avoid having to keep track and maintain local development environments/machines, we all use the same version of composer, node, npm, and yarn which is set in the application containers. This avoids issues with differing versions or dependencies, so all anyone needs to have locally is: the same version of lando and docker. This makes the development environments more portable and ephemeral, which I believe is a great feature of containerization and Lando.

I hope this comment can help others in the future that may face the same issue.

commented

@cruno91 I'm so glad you were able to get it figured out! Would you be willing to create a "Using with Lando" entry, or something like that in the docs so that others can use this workflow if they want?

Probably a new file here: https://github.com/emulsify-ds/documentation/tree/master/usage
And then linking to it right under the "Hot Reload Drupal" item here: https://github.com/emulsify-ds/documentation/blob/5a29314d229950d1939c856791b09e88f026c3d1/SUMMARY.md

That would be super awesome!

(I added you as a contributor to the repo, in case you do. That way you won't have to go through the cumbersome fork process)

commented

@ModulesUnraveled I'd be happy to do that!