area17 / blast

Storybook for Laravel Blade 🚀

Home Page:https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot GET /storybook_preview/blast-demo/button

Joeri-KIXX opened this issue · comments

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?

@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.

@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.

-> 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?

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!

@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

@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.

@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

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.

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