storybook 6006, browsersync 3000 404

[sam452]

I'm at an impasse as I'd like to continue with storybook and to build a new theme. Attempting http::packt.ddev.site:6006 returns a 404. https://packt.ddev.site:6006 returns "Site can't be reached" ERR_SSL_UNRECOGNIZED_NAME_ALERT

I have the latest docker-compose.storybook.yml from the final branch, per the most-recent issues related to storybook. My Mac OS shows me as the owner recursively of storybook and its node_modules. There are lots of modules in that directory. ddev describe shows storybook as OK https://packt.ddev.site:6006 InDocker: storybook:6006 I've ensured only ddev's containers are running.

Running ddev logs -s storybook returns this truncated output:

yarn install v1.22.19
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.30s.

> storybook@1.0.0 storybook
> storybook dev -p 6006

@storybook/cli v7.0.18

info => Serving static files from ././public at /
info => Starting manager..
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
<s> [webpack.Progress] 3% setup watch run
<s> [webpack.Progress] 3% setup watch run VirtualModulesPlugin
<s> [webpack.Progress] 3% setup watch run webpack-dev-middleware
<s> [webpack.Progress] 3% setup watch run
...
<s> [webpack.Progress] 99% cache begin idle
<s> [webpack.Progress] 99% cache begin idle
<s> [webpack.Progress] 100% 

│                                                                     │
│   Storybook 7.0.18 for html-webpack5 started                        │
│   1.99 s for manager and 9.32 s for preview                         │
│                                                                     │
│   Local:            http://localhost:6006/                          │
│   On your network:  http://192.168.224.2:6006/                      │
│                                                                     │
│   A new version (8.0.9) is available!                               │
│                                                                     │
│   Upgrade now: npx storybook@latest upgrade                         │
│                                                                     │
│   Read full changelog:                                              │
│   https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md   │
│                                                                     │
╰─────────────────────────────────────────────────────────────────────╯
<s> [webpack.Progress] 0% 

<s> [webpack.Progress] 1% cache end idle
<s> [webpack.Progress] 1% cache end idle
...
<s> [webpack.Progress] 99% cache begin idle
<s> [webpack.Progress] 100% 

Everything looks good except it doesn't

Running ddev browsersync shows it seems to load and in a watch state.

Yet, http://packt.ddev.site:3000 returns a 404. https://packt.ddev.site:3000 returns the same "Site can't be reached."

Is there something in the book that I missed?

[aXb0t]

Came across a possible similar issue with storybook, on Linux though.

I was able to access storybook through the "On your network" address, after adjusting permissions for node_modules/.cache.

Are you able to load storybook at the logged adress?: http://192.168.224.2:6006/

Also curious what is the output of ddev storybook storybook --debug?

Not sure about browsersync. If both storybook 6006, browsersync 3000 are 404 maybe it is a DDEV configuration issue.

EDIT/update: Not a native Mac user, so I borrowed a MacBook Pro running Monterey 12.7.4

I think I reproduced the error state on a fresh machine, fresh OS, fresh VS Code and dev tools, steps taken to reproduce:

---

git clone this repo

ddev start

git fetch this repo:final branch

git checkout final branch

ddev build

At this point URLs provided by ddev describe appear to be consistent with original issue report.

https://packt.ddev.site browser shows "Site can't be reached" ERR_SSL_UNRECOGNIZED_NAME_ALERT https://packt.ddev.site:6006 browser shows "Site can't be reached" ERR_SSL_UNRECOGNIZED_NAME_ALERT

---

After reaching this state, took a couple steps to remedy the issue:

Install mkcert brew install mkcert nss && mkcert -install Composer update ddev composer update --prefer-dist Restart DDEV ddev restart

Now storybook at least seems to be working at https://packt.ddev.site:6006/ Site however is not, https://packt.ddev.site/user/login is Page not found -- but at least it is Drupal now serving the page not found message.

Ran one more ddev build and now the final version of the demo site seems to be working for me:

https://packt.ddev.site/user/login is prompting a login.

My hunch is mkcert install helped the browser or macOS avoid security blocking site access, i.e. the ERR_SSL_UNRECOGNIZED_NAME_ALERT message

Composer update, ddev build and restart must have allowed some site and DDEV configurations to mesh properly, I guess?

There were some errors along the way with ddev build where the homepage couldn't be set and some other commands failed. I think I came across this previously, and had to set Drush to a different version.

[sam452]

Thanks, @alexb7217 your rapid input is helpful. The only thing that worked for me was to take the second storybook port, the one not used for https, as my storybook. That is, http://packt.ddev.site:6007. Despite seemingly successful installation of the mkcert -install none of the https invocations work. It seems your build out of the packt app had some blockers, just like the build out of the respective node modules brings its own challenges. Hope you are able to get everything finally running. The browsersync acts like it's running, but it still unresponsive. I'll open a separate issue once I do some more troubleshooting.