Integration of Varbase with Storybook
Varbase has been integrated with Storybook to provide a listing of stories for Single Directory Components (SDC) components. This integration allows for easier development and testing of Varbase Components.
Steps to Set up a Working Storybook for Varbase
Enable the
cl_server
module on the site either through the site's interface or by running the command./bin/drush en cl_server
with Drush. Note that the CL Server module should not be kept running on a production site.Navigate to
"/admin/people/permissions/module/cl_server"
to give theUse the CL Server endpoint
permission to all user roles. Check theAnonymous user
andAuthenticated user
checkbox and pressSave permission
submit button
Use Drush to grant specified permission(s) to a role.
./bin/drush role:perm:add anonymous 'use cl server'
./bin/drush role:perm:add authenticated 'use cl server'
Use the CL Server endpoint
Warning: Give to trusted roles only; this permission has security implications.
Allows a user to access the Component Library: Server endpoint
Use Drush to remove specified permission(s) from a role.
./bin/drush role:perm:remove anonymous 'use cl server'
./bin/drush role:perm:remove authenticated 'use cl server'
Add the following exclude of modules to the
settings.php
orsettings.local.php
only to the development environment:
Change the following Cross-Site HTTP requests (CORS) in the
development.services.yml
file.
Enable Twig debugging by
debug: true
in thedevelopment.services.yml
file.
Having a local services file. Make sure to have the right path for custom local development services file. sites/default/development.local.services.yml
Having a local settings settings.local.php
file. When used in a local development environment, or in Development, Staging, or Demo hosts.
Enabling Twig debugging is not recommended in production environments.
Disable the Twig cache by
cache: false
in thedevelopment.services.yml
file.
Disabling the Twig cache is not recommended in production environments.
Set up Storybook for your Drupal site.
Please see the @lullabot/storybook-drupal-addon, which will make your Storybook aware of Drupal by connecting it to this module.
Change the Local Development Domain
Change
varbase.local
in thepackage.json
file to the appropriate local or development domain name.Replace
process.env.STORYBOOK_CL_SERVER_DOMAIN
in thepreview.js
file with the base URL of your project or an environment variable representing the local or development domain.Open a command terminal window and navigate to your project's directory.
Run the
yarn install
command in the terminal to install the necessary dependencies.Run the
yarn storybook:dev
command to start the development site for the Storybook.The default browser will open, displaying the list of Default Varbase Components in the Storybook.
Storybook Build
Building the storybook ones for the project, only for demos, staging, or hosted development, when the other ports are not allowed.
Run the yarn storybook:build
command to build the story, in the local or in at the dev, test, staging, or demo server.
A domain name could point at the storybook folder.
Example:
An example development, staging or demo
my-staging-varbase-site.com
domain name can point at thedocroot
directory, which will bootstrap from VarbaseA sub domain
storybook.my-staging-varbase-site.com
domain name can point at thestorybook
directory, which will load the Varbase Storybook, and the Component Library Server will have requests from themy-staging-varbase-site.com
Customizing Varbase Storybook for a Project:
Switching Between Themes
To showcase a custom cloned generated theme, uncomment and modify the following line in the .storybook/preview.js
file:
// mytheme: {title: 'My Custom Theme for a Project'}
Show Custom Vartheme BS5's Components
To include components from Vartheme BS5 Starterkit, uncomment and modify the following line in the .storybook/main.js
file:
Show Custom Theme's Components
In case of having a custom theme for a project by
Creating Your Own ThemeTo include components from a custom cloned generated theme, uncomment and modify the following line in the .storybook/main.js
file:
Please ensure that the path to the custom theme is correct. It should be located either in "../docroot/themes"
or "../docroot/themes/custom"
Show Custom Module's Components
To include components from a custom module, uncomment and modify the following line in the .storybook/main.js
file:
More Information About Bootstrap ~5.3.0 Theme Color Modes
In the main.js`
file:
Add the attribute
data-bs-theme='dark'
to the body tag of the inner iframe in the canvas only when necessary. The default value isdata-bs-theme='light'
.Bootstrap now supports color modes, or themes, starting from version ~5.3.0. You can explore the default light color mode and the new dark mode, or create your own theme using Bootstrap's styles as a template. https://getbootstrap.com/docs/5.3/customize/color-modes/
Run Varbase Storybook in Platformsh
Having a working Storybook for development, testing or staging.
NOT for production environments.
Select The Varbase Template as The Project Type
Choose Vardot/platformsh-varbase from the pre-existing code base template to start a project with.
Select Varbase as the template, by default a Varbase 10 will be built
After creating the project and installing Varbase 10
Edit the applications.yaml
File in the .platform
Folder
applications.yaml
File in the .platform
FolderEdit the routes.yaml
File in the .platform
Folder
routes.yaml
File in the .platform
FolderReplace Site URL with an Environment URL
Edit the preview.js
file in the .storybook
folder
Use 'development.local.services.yml' File
Have the following in the settings.platformsh.php
file
Both files are in the Vardot/platformsh-varbase project template.
After committing and starting the development environment for the development branch,
The Storybook link will work as follow
Related Integration Issues
Last updated