area17 / blast

Storybook for Laravel Blade 🚀
https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c
Apache License 2.0
262 stars 37 forks source link

Cannot GET /storybook_preview/blast-demo/button #35

Closed Joeri-KIXX closed 4 months ago

Joeri-KIXX commented 2 years ago

After installing blast and added the demo button I get the error message 'Cannot GET /storybook_preview/blast-demo/button'

In developer console it shows a 'GET' error 404 not found on this url: http://localhost:6006/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after

What should I change in my config to make this work?

mrtimbrook commented 2 years ago

@Joeri-KIXX Were you getting a message about a broken build when running the launch task? I've just published Blast 1.4.1 which fixes this and may fix your issue. (You may need to include --install when running the launch task after updating)

If that wasn't what was causing your issue can you check that the APP_URL is accessible in your browser as this is what Blast uses to access the components.

If that's all working and you still can't see the component in Storybook, try going to http://[APP_URL]/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after. This is the url which is loaded in to Storybook and will display any php errors.

Joeri-KIXX commented 2 years ago

@mrtimbrook I just created a new laravel project, installed blast 1.4.1 with no warnings or errors. APP_URL=http://localhost

-> Surfing to http://localhost/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after -> Gives me '404 - Not Found'

-> Surfing to http://localhost:6006/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after ->Gives me 'Cannot GET /storybook_preview/blast-demo/button'

The Canvas view itself shows this: image

While the inspector gives me the CORS error.

mrtimbrook commented 2 years ago
-> Surfing to http://localhost/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after
-> Gives me '404 - Not Found'

This sounds like there's an issue with your app as this url should load the component page whether Blast is running or not.

As for the CORS issue, we're currently working on more fixes for CORS issues but in the mean time another user posted a solution to a similar issue here. Can you try that?

Joeri-KIXX commented 2 years ago

Hi @mrtimbrook: The CORS issue is fixed with this tutorial, thanks! I'm still getting the 'Cannot GET /storybook_preview/blast-demo/button' message though.

I have no idea what could have gone wrong since I created a brand new laravel 8 project, installed blast and executed the blast-demo. Any idea what I could do to start debugging this issue?

Thank you very much for you time and help! It's much appreciated!

mrtimbrook commented 2 years ago

@Joeri-KIXX Great news about the CORS fix!

Regarding the 404 issue. This seems more like an environment issue. Do any other pages in your app work?

From the Blast side of things, you could run php artisan route:list and see if you have the route defined:

GET|HEAD | storybook_preview/{name?}  |  A17\Blast\Controllers\StoryController
mrtimbrook commented 2 years ago

@Joeri-KIXX I just noticed that you're going to wrong URL to see the component in Blast. Going to http://localhost:6006/ will load the Storybook UI and you can navigate to your component from there.

Joeri-KIXX commented 2 years ago

@mrtimbrook: I'm getting the same error when using the Storybook UI (see screenshot below)

All other pages in my app work great. Also I did run the php artisan route:list and the route is defined. The only thing I see is that the terminal says I'm running Storybook 6.3.8 and there is a new version 6.4.9 available, but I can't seem to upgrade. It shows me this feedback: Checking for latest versions of '@storybook/*' packagesinfo ,Upgrading /Users/xxx/package.json info info No dependencies. info , • Installing upgrades • Preparing to install dependencies. ✓

• Installing dependencies⸨⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠇ reify: timing arborist:ctor Compl up to date, audited 1001 packages in 5s

94 packages are looking for funding run npm fund for details

11 vulnerabilities (6 moderate, 5 high)

To address all issues, run: npm audit fix

Run npm audit for details. . ✓ WARN No storybook core packages found. WARN 'npm ls | grep storybook' can show if multiple versions are installed. 🔎 checking 'cra5' 🔎 checking 'webpack5' 🔎 checking 'angular12' 🔎 checking 'mainjsFramework' Unable to find storybook main.js config, skipping 🔎 checking 'eslintPlugin'

image

mrtimbrook commented 2 years ago

The Storybook version is defined within Blast, I'll be updating it to the latest version in the next release (likely next week).

What do you have set for the APP_URL in your .env file? Blast uses that to build the URL to view the components so if that is unset or incorrect, it won't work properly.

Joeri-KIXX commented 2 years ago

The APP_URL in my .env is the default: APP_URL=http://localhost

yusupsupriyadi commented 1 year ago

try changing APP_URL= http://localhost:8000 according to the php artisan serve that is running in the browser. (host can be different on other computers)

and make sure you are running php artisan serve