Integration of Varbase with Storybook 2.0
Last updated
Last updated
Varbase has been integrated with to provide a listing of stories for components. This integration allows for easier development and testing of .
Not for production!!, only for development or staging.
Follow with the following link to install Varbase 10.0.x with DDEV
Varbase 10.1.0 stable is not released yet.
Follow the following steps to set up a development environment for Varbase 10.1.x.
Before proceeding, ensure that you have the required tools installed on your local development environment: Make sure you have the following installed:
DDEV → For local development
wget → To download files from the web
zip/unzip → To extract compressed files
Learn more about DDEV on the official website:
is a development tool!
Note that while you can run DDEV in production, it is highly discouraged, not recommended, and 100% not supported! DON'T DO IT!
To get the code for the Varbase 10.1.x branch and extract it to your chosen location with a custom folder name, follow these steps:
Start DDEV and build inside it.
Install Varbase using drush. (shell web container command) Usage: ddev install-varbase minimal|full|demo [flags] Aliases: install-varbase, varbase:install
Install Varbase for the DDEV project.
A password for the webmaster user will be provided after the installation is complete.
Examples:
Quick Varbase Demo installation
ddev install-varbase demo
Full Varbase installation
ddev install-varbase full
Minimal Varbase installation
ddev install-varbase minimal
The ddev init-storybook
command in Varbase is a custom DDEV command designed to initialize Storybook for the DDEV project.
Generate all stories using the following alias script
It will run the following drush command
drush storybook:generate-all-stories --force
Important to run the ddev yarn storybook:gen
command for all new or changed stories.
Enable the storybook
module on the site either through the site's interface or by running the command drush en storybook
with Drush. Note that the CL Server module should not be kept running on a production site.
Navigate to "/admin/people/permissions/module/storybook"
to give the Render storybook stories
permission to all user roles. Check the Anonymous user
and Authenticated user
checkbox and press Save permission
submit button.
./bin/drush role:perm:add anonymous 'render storybook stories'
./bin/drush role:perm:add authenticated 'render storybook stories'
Use the Render Storybook stories
Use the Render Storybook stories
Warning: Give to trusted roles only; this permission has security implications. Allows a user to access the Twig Storybook endpoint to render a template with stories.
./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
or settings.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 the development.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 the development.services.yml
file.
Disabling the Twig cache is not recommended in production environments.
Change varbase.local
in the package.json
file to the appropriate local or development domain name.
Replace process.env.STORYBOOK_SERVER_RENDER_URL
in the preview.ts
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:gen
to generate all stories.
Run the yarn storybook:dev
command to start the development site for the Storybook.
Open site domain with :6006 port.
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 the docroot
directory, which will bootstrap from Varbase
A sub domain storybook.my-staging-varbase-site.com
domain name can point at the storybook
directory, which will load the Varbase Storybook, and the Component Library Server will have requests from the my-staging-varbase-site.com
To showcase a custom cloned generated theme, uncomment and modify the following line in the .storybook/preview.ts
file:
// mytheme: {title: 'My Custom Theme for a Project'}
To include components from Vartheme BS5 Starterkit, uncomment and modify the following line in the .storybook/main.js
file:
In case of having a custom theme for a project by
To include components from a custom cloned generated theme, uncomment and modify the following line in the .storybook/main.ts
file:
Please ensure that the path to the custom theme is correct. It should be located either in "../docroot/themes"
or "../docroot/themes/custom"
To include components from a custom module, uncomment and modify the following line in the .storybook/main.ts
file:
Having a working Storybook for development, testing or staging.
NOT for production environments.
Select Varbase as the template, by default a Varbase 10.1 will be built
After creating the project and installing Varbase 10
Edit the preview.ts
file in the .storybook
folder, replace this with your Drupal site URL, or an environment variable.
Have the following in the settings.platformsh.php
file
After committing and starting the development environment for the development branch,
The Storybook link will work as follow
Have a look at the content of the command.
Have a look at the content of the command.
Use Drush to .
Use Drush to .
Choose from the pre-existing code base template to start a project with.
Both files are in the project template.