This time, I would like to change things up a bit and expand the Storybook project into Vercel so that it can be referenced.
Incidentally, the procedure is published in the following page, but the description in package.json seems to be out of date and did not work correctly.
In this case, we were able to expand to Vercel using the following procedure.
Check .storybook\main.ts
When the project is created, the .storybook\main.ts file is created and the value of staticDirs may be set using \\ . By rewriting the file as follows, the stuck point in Vercel deployment can be avoided.
JSON
staticDirs: ["../public"],Create a new project
Since we have deployed the code to GitHub in the previous article, we will create a project in conjunction with the repository. To deploy, simply select Storybook in the Framework Preset.
Click the Deploy button to proceed with the Build and begin deployment of the site. After a few moments, the site will be up and running as shown below.
Summary
As of the writing of this blog post, the following components are available for reference
- Image
- LinkList
- Promo
- RichText
In the above, for the Image component, there is sitecoreContext.pageState and the part that changes the display between page edit mode and preview mode. This part of the code in the Edit Page mode has been removed.
The code for this phase can be found in the following branches
As for the site, we will update it as needed, but you can refer to it at the following URL