I am guessing to include a custom .config.js (https://git.drupalcode.org/project/bootstrap_storybook/-/blob/3.1.x/src/...) is to override proxy. however I dont think proxy.proxy is parsed through to laravel.mix (https://git.drupalcode.org/project/bootstrap_storybook/-/blob/3.1.x/src/...).

also https://git.drupalcode.org/project/bootstrap_storybook/-/blob/3.1.x/src/... storybook doesnt really use webpack.mix.js. to include a storybook config in webpack doesnt really help storybook.

I would recommend to find different way to do that, otherwise just remove line 14 in webapck.mix please.

My lando solution:
https://github.com/iijiang/drupal9_bootstrap_storybook_lando/blob/master...
https://github.com/iijiang/drupal9_bootstrap_storybook_lando/blob/master...
https://github.com/iijiang/drupal9_bootstrap_storybook_lando/blob/master...
https://github.com/iijiang/drupal9_bootstrap_storybook_lando/blob/master...

This solution works for Lando, to ensure Lando could get the right proxy for laravel-mix.

Comments

yi_jiang created an issue. See original summary.

doxigo’s picture

doxigo commented

Hey Yi, thanks for your suggestions, but there are a couple of things we should consider:

If there is no dev tools, config.js works just fine, If you want to proxy through lando the config.js should be ignored for sure since Lando will build your final proxy, but not everyone uses Lando, they might use ddev or no specific tooling for that matter

your solution seems to be rather more bulletproof using `.evn` file, I'll check it out and will probably roll that out since it's the rather more modern way, it probably helps with other dev tools as well

Will have to take a look at this later this week but thanks a lot for pushing this theme forward 💪

yi_jiang’s picture

yi_jiang commented

Hey, I did one thing on weekend. instead of let laravelmix hardcode the .env path, I loaded from lando. it works.
https://github.com/iijiang/drupal9_bootstrap_storybook_lando/blob/master...

Given I dont work from my local computer for work, that the main reason I start to using lando at home, my question is
https://github.com/iijiang/drupal9_bootstrap_storybook_lando/blob/master...
does "http://storybook.loc" even work from your end? can you open this url to be able to see storybook or browsersync? do you have to add the port number as well? Or have you ever override the proxy to something else, and it parse through to webpack.mix? I suppose its always a http://localhost:3000 or different port number.

from the beginning when I used this theme, I always just use drupal url for browsersync and storybook via different ports.

doxigo’s picture

doxigo commented

So if we want to move your changes to the main theme, shouldn't the .env file be loaded from the theme itself here:
https://github.com/iijiang/drupal9_bootstrap_storybook_lando/blob/master...

Also, I still haven't got the time to test your changes, will do this week though

yi_jiang’s picture

yi_jiang commented

Hey I wouldnt recommend you do that :). its drupal globe env variable. can be different based on projects or can be different in how the project sets up, its not really a theme driven approach. The whole thing I like this theme is because the independent.

I also have created a dev branch it got different lando settings, which installs node as a separate service. it works as well. The most lando project I have googled, it run npm install, or run watch during the container build process, which I dont really want it.
Because:
1. Lando build takes too long (imagine lando rebuild will always run watch or crazy.)
2. I want to run/stop npm package whenever I need, more flexible. (In this case you dont need run bs or storybook all the time)

in this case, I dont know why you need parse a proxy obj in mix.browserSync, it uses localhost as default. It will work all the time, unless you need to give a different proxy (lando, or a secured Dev environment).

also I am not sure my understand is right or not, mix.criticalCss only runs on node_env=production, in package.json file, I dont really see the packages are separated from devDependencies. (I can see the proxy.proxy also used in there)

doxigo’s picture

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

Hey Yi,

Sorry, it took me a while to get back to this, you know how things are with the covid and stuff!

Anyways, I still think your dotenv approach is valid for such things like Lando and so on, which could be nice to be integrated, if you could provide a PR maybe we could examine this more, otherwise the config.js and the proxy does actually work, so I'm closing this as "Works as designed" but if you have a better workaround let me know please.