LogoLogo
10.0.x
10.0.x
  • Overview
    • About Varbase
    • Roadmap
    • Release Cycle and Supported Versions
    • How to Get Support
  • Developers
    • Getting Started
    • Installing Varbase
      • Requirements
      • Installing Varbase locally with DDEV
      • Installing Varbase locally with Lando
    • Understanding Varbase
      • Basic Concepts
      • Core Components
        • Varbase Core
          • Varbase Admin
          • Varbase Page
          • Varbase Security
          • Varbase Webform
          • Varbase Default Content
          • Varbase Tour
        • Varbase Media
        • Varbase Editor
        • Varbase Email
        • Varbase SEO
        • Varbase Workflow
        • Varbase Dashboards
        • Varbase Layout Builder
          • Varbase Landing page (Layout Builder)
          • Varbase Heading Block
          • Varbase Rich Text Block
          • Varbase HTML Code Block
          • Varbase Media (Image/Video) Block
          • Varbase Gallery Block
        • Varbase Components
        • Vartheme Claro
        • Vartheme BS5
      • Optional Components
        • Varbase AI
          • Varbase AI Default recipe
          • Varbase AI Editor Assistant recipe
          • Varbase AI Image Alt recipe
          • Varbase AI Taxonomy Tagging recipe
          • Varbase AI Agents recipe
        • Varbase API
        • Varbase Internationalization
        • Varbase Hero Slider
        • Varbase Carousels
        • Varbase Blog
        • Varbase Search
        • Varbase Social Single Sign-On
        • Varbase Media Twitter
        • Varbase Media Instagram
        • Varbase Content Planner
        • Varbase Bootstrap Paragraphs
          • Varbase Bootstrap Paragraphs Text and Image
        • Varbase Landing Page (Paragraphs)
      • Additional Components
        • Varbase Media Header
        • Varbase FAQs
        • Varbase Reports
        • Varbase Commerce
        • Varbase YouTube Import
      • Development Components
        • Varbase Development
        • Reroute Email
        • Varbase Updates Helper
      • Deprecated Components
        • Varbase Media Hero Slider
        • Varbase Style Guide
        • Vartheme BS4
        • Varbase Total Control Dashboard
    • Configuring a Varbase Site
      • Navigation
        • Defining Active Menu Trail Using Menu Position
      • Using View Modes Inventory
      • Content Moderation and Workflows
      • URL Aliases in Varbase/Drupal
        • Configuring URL Aliases
        • Managing URL Aliases
      • Managing URL Patterns for Multilingual Websites
      • Managing Date and Time Formats to Display Across the Site
      • Using Varbase Layout Builder
        • Creating a Landing Page With Varbase Layout Builder
        • Activating Varbase Layout Builder for Content Types
      • Configuring Pathologic When Going Live
      • Configuring SEO Features
        • Disallow Oembed Media Links
      • Configuring Security Features
        • Spam Protection
        • Password Policies
        • Other Security Kits
        • Flood Contorl
        • Enable HTTP Password Authentication
      • Configuring JSON:API Features
      • Configure Varbase Media Hero Slider
      • Configuring Varbase Media Header
      • Configuring Varbase Mailer Settings
        • Configure Symfony Mailer
      • Configure Level of Logging and Errors
      • Entity Definition Update Manager Class
      • Module Installer Factory Class
      • Configure Ckeditor 5 Media Embed
    • Theme Development with Varbase
      • Understanding The Vartheme Starterkit Theme
      • Creating Your Own Theme
      • Integration of Varbase with Storybook 1.0 - CL Server
      • Integration of Varbase with Storybook 2.0
      • Customize a Varbase Single Directory Components (SDC) In a Custom Theme
      • Local Tasks and Moderation Sidebar
      • Add Preloaded Fonts in Vartheme
      • Command to Install Needed Theming Tools
      • Manually Install Needed Theming Tools
    • Launching a Varbase Site to Production
    • Updating a Varbase Site
      • Understanding Varbase Updater Package
      • Handling Patches When Updating
      • Handling Configuration Updates
      • Updating Varbase to work with Composer 2.0
      • Updating Drush to the Latest Stable Version
      • Version Update Guides
        • Updating Varbase ~9.0 to Drupal 10
        • Updating from Varbase 8.x to 9.x
    • Varbase Patches
    • Frequently Asked Questions (FAQs)
    • Extending Varbase
      • Overriding Varbase
      • Creating Your Own Feature
      • Install Needed YARN and Webpack Tools
      • Compiling Provided Component Styles
      • Check Standards/Practice Coding And Linting
  • Content Designers
    • Accessing the Administration Area
      • Website Environments
    • Dashboard
      • Reports
    • Content Management
      • Create Content
        • Rich-Text Editor “WYSIWYG”
      • Modify Content
      • Delete Content
      • Preview Content
      • Bulk Edit Content
      • Publish Content
      • Authoring Information
    • Content Structure
      • EntityQueues
        • Add a New Term
      • Menu Management
        • Add Menu Items
        • Update Menu Items
        • Adding a Page to the Menu
      • Taxonomies
        • List Terms
        • Add Terms
        • Reorder and Edit Terms
    • Content Translation
      • Translating Content
      • Language Switcher
      • Deleting a Translation
      • Editing a Translation
    • Content Workflow
    • Layout Builder
      • Section
        • Section Styles
      • Block Management
        • Block Styles
      • Reordering Blocks
    • Webforms
      • Create New Webform View
      • Setting up Emails Handler Conditions
      • Setting up Confirmations Message Settings Types
    • Media Management
      • Accessing the Media Library
      • Uploading Media Files
        • Image
        • Remote Video
        • Video
      • Applying Metadata and Descriptions
      • Resizing Images
    • User Management
      • Login & Registration
      • Add User
      • Edit User
      • Delete User
      • Simulating Another User
      • Default Roles and Site Personas
        • Edit Roles' Permissions
        • Managing Roles
    • URL Management
      • URL Aliases
      • Generating URL Alias
      • URL Redirects
      • Domain Redirects
    • SEO Management
      • XML Sitemap
      • Meta Tags in Varbase
      • Disallow Indexing for Content Items
    • Site Configuration
      • System
        • Clearing Varbase Cache
        • Google Analytics
        • Mail Templates
      • User Interface
        • Coffee
        • External Links
        • Gin Moderation Sidebar
        • Layout Builder Modal
        • Moderation Sidebar
        • Shortcuts
        • Taxonomy Manager
        • Tours
        • CL Components
        • Antibot
        • Responsive Preview
        • Navigation Settings
      • Development
      • Varbase Settings
      • Web Services
        • OpenAPI
    • Additional Tips
      • Content Uploading Standards
      • Common Error Handling Tips
      • Glossary
  • Contributing
    • Contributing to Documentation
Powered by GitBook
On this page
  • Initialize Storybook for DDEV
  • When Adding or Changing Stories
  • Manual Steps by step to Set up a Working Storybook for Varbase
  • Storybook Build
  • Customizing Varbase Storybook for a Project:
  • Switching Between Themes
  • Show Custom Vartheme BS5's Components
  • Show Custom Theme's Components
  • Show Custom Module's Components
  • Run Varbase Storybook in Platformsh
  • Select The Varbase Template as The Project Type
  • Replace Site URL with an Environment URL
  • Use 'development.local.services.yml' File
  1. Developers
  2. Theme Development with Varbase

Integration of Varbase with Storybook 2.0

PreviousIntegration of Varbase with Storybook 1.0 - CL ServerNextCustomize a Varbase Single Directory Components (SDC) In a Custom Theme

Last updated 3 months ago

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.

Initialize Storybook for DDEV

Follow with the following link to install Varbase 10.0.x with DDEV

TEMP for the Varbase 10.1.x Branch

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!

1. Download and Extract Varbase 10.1.x

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:

wget https://github.com/Vardot/varbase-project/archive/refs/heads/10.1.x.zip
unzip 10.1.x.zip
cd varbase-project-10.1.x

2. Start DDEV and Install Dependencies

Start DDEV and build inside it.

ddev start
ddev composer install -vvv

3. Install Varbase Using the Custom DDEV Container Command

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

4. Initialize Storybook for Varbase

ddev init-storybook

The ddev init-storybook command in Varbase is a custom DDEV command designed to initialize Storybook for the DDEV project.

5. Generate Stories

Generate all stories using the following alias script

ddev yarn storybook:gen

It will run the following drush command

drush storybook:generate-all-stories --force

6. Start Varbase Storybook 2.0

ddev yarn storybook:dev

7. Verify Installation and Links

ddev status
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Project: varbase-project-10.1.x /var/www/html/dev/varbase-project-10.1.x https://varbase-project-10.1.x.ddev.site: │
│ 8443                                                                                                               │
│ Docker platform: linux-docker                                                                                      │
│ Router: traefik                                                                                                    │
├──────────────┬──────┬─────────────────────────────────────────────────────────────────────────┬────────────────────┤
│ SERVICE      │ STAT │ URL/PORT                                                                │ INFO               │
├──────────────┼──────┼─────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ web          │ OK   │ https://varbase-project-10.1.x.ddev.site:8443                           │ drupal11 PHP 8.3   │
│              │      │ InDocker -> Host:                                                       │ Server: apache-fpm │
│              │      │  - web:80 -> 127.0.0.1:32897                                            │ Docroot: 'docroot' │
│              │      │  - web:443 -> 127.0.0.1:32898                                           │ Perf mode: none    │
│              │      │  - web:6006 -> 127.0.0.1:32899                                          │ Node.js: 20        │
│              │      │  - web:8025 -> 127.0.0.1:32900                                          │                    │
├──────────────┼──────┼─────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ db           │ OK   │ InDocker -> Host:                                                       │ mariadb:10.11      │
│              │      │  - db:3306 -> 127.0.0.1:32901                                           │ User/Pass: 'db/db' │
│              │      │                                                                         │ or 'root/root'     │
├──────────────┼──────┼─────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ Mailpit      │      │ Mailpit: https://varbase-project-10.1.x.ddev.site:8026                  │                    │
│              │      │ Launch: ddev mailpit                                                    │                    │
├──────────────┼──────┼─────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ storybook    │      │ https://varbase-project-10.1.x.ddev.site:6006                           │                    │
│              │      │ InDocker: web:6006                                                      │                    │
├──────────────┼──────┼─────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ Project URLs │      │ https://varbase-project-10.1.x.ddev.site:8443, https://127.0.0.1:32898, │                    │
│              │      │ http://varbase-project-10.1.x.ddev.site:8080, http://127.0.0.1:32897    │                    │
└──────────────┴──────┴─────────────────────────────────────────────────────────────────────────┴────────────────────┘

When Adding or Changing Stories

Important to run the ddev yarn storybook:gen command for all new or changed stories.

Manual Steps by step to Set up a Working Storybook for Varbase

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

# Local development services.
#
# To activate this feature, follow the instructions at the top of the
# 'settings.platformsh.php' or 'settings.local.php' file, which sits next to this file.
parameters:
  twig.config:
    debug: true
    cache: false
  http.response.debug_cacheability_headers: true
  storybook.development: true
  cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['*']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['*']
    # Configure requests allowed from specific origins. Do not include trailing
    # slashes with URLs.
    allowedOrigins: ['*']
    # Configure requests allowed from origins, matching against regex patterns.
    allowedOriginsPatterns: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: true
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

Not recommended to keep "cors.config" with "enabled: true" in production environments.

Better to keep all changes 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

// Enable the development local services for Storybook.
$settings['container_yamls'][] = DRUPAL_ROOT . '/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 the Local Development Domain

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

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.

Not for production!!, only for development or staging.

A domain name could point at the storybook folder.

Example:

  1. An example development, staging or demo my-staging-varbase-site.com domain name can point at the docroot directory, which will bootstrap from Varbase

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

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.ts 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:

"../docroot/themes/contrib/vartheme_ba5/components/**/*.mdx",
"../docroot/themes/contrib/vartheme_ba5/components/**/*.stories.@(json)",

Show Custom Theme's Components

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:

"../docroot/themes/custom/mytheme/components/**/*.mdx",
"../docroot/themes/custom/mytheme/components/**/*.stories.@(json)",

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.ts file:

"../docroot/modules/custom/my_custom_module/components/**/*.mdx",
"../docroot/modules/custom/my_custom_module/components/**/*.stories.@(json)",

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

Select Varbase as the template, by default a Varbase 10.1 will be built

After creating the project and installing Varbase 10

Replace Site URL with an Environment URL

Edit the preview.ts file in the .storybook folder, replace this with your Drupal site URL, or an environment variable.

    server: {
      // Replace this with your Drupal site URL, or an environment variable.
      url: process.env.STORYBOOK_SERVER_RENDER_URL,
    },

Use 'development.local.services.yml' File

Have the following in the settings.platformsh.php file

// Enable the development local services for Storybook.
if (isset($platformsh->branch)) {
  if (!$platformsh->onProduction() || !$platformsh->onDedicated()) {
    $settings['container_yamls'][] = $app_root . '/' . $site_path . '/development.local.services.yml';
  }
}

After committing and starting the development environment for the development branch,

The Storybook link will work as follow

https://storybook.{default}

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.

Storybook
Single Directory Components (SDC)
Varbase Components
https://ddev.com
DDEV
install-varbase
init-storybook
grant specified permission(s) to a role
remove specified permission(s) from a role
Creating Your Own Theme
Vardot/platformsh-varbase
Vardot/platformsh-varbase
Use the Storybook endpoint Module Permissions
Click on Use a Template
Select Varbase as the Template