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.
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.
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.ymlfile.
# 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:gentogenerate 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:buildcommand 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:
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
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:
Select Varbase as the template, by default a Varbase 10.1 will be built
After creating the project and installing Varbase 10
Edit the applications.yaml File in the .platform Folder
# -------------------------------------------------------------
# Uncomment the following when start a storybook in development or staging
# NOT for production environments.
#
# Follow with Integration of Varbase with Storybook
# https://docs.varbase.vardot.com/v/10.0.x/developers/theme-development-with-varbase/integration-of-varbase-with-storybook
#
# This will allow for a start of a storybook:http upstream
# -------------------------------------------------------------
# - name: storybook
# type: 'nodejs:18'
# source:
# root: "/"
# dependencies:
# php:
# "composer/composer": "~2.0"
# nodejs:
# npm: "^6.10"
# node: "^18.17"
# yarn: "^1.22"
# disk: 512
# build:
# flavor: none
# variables:
# env:
# NODE_OPTIONS: --max-old-space-size=4096
# STORYBOOK_CL_SERVER_DOMAIN: 'varbase.local'
# hooks:
# build: |
# set -e
# cd $PLATFORM_APP_DIR
# composer install --ignore-platform-reqs --no-scripts
# yarn install --frozen-lockfile
# yarn storybook:build
# post_deploy: |
# cd $PLATFORM_APP_DIR/.storybook/
# export STORYBOOK_CL_SERVER_DOMAIN=$(node setup-storybook.js)
# echo "STORYBOOK_CL_SERVER_DOMAIN: $STORYBOOK_CL_SERVER_DOMAIN"
# web:
# locations:
# '/':
# root: 'storybook'
# passthru: true
# index: ["index.html"]
# allow: true
# headers:
# Access-Control-Allow-Origin: "*"
# Access-Control-Expose-Headers: "true"
# Access-Control-Max-Age: "false"
# Access-Control-Allow-Credentials: "true"
# commands:
# start: |
# sleep infinity
# -------------------------------------------------------------
# Uncomment the following when start a storybook in development or staging
# NOT for production environments.
#
# Follow with Integration of Varbase with Storybook
# https://docs.varbase.vardot.com/v/10.0.x/developers/theme-development-with-varbase/integration-of-varbase-with-storybook
#
# This will allow for origin
# -------------------------------------------------------------
# headers:
# Access-Control-Allow-Origin: "*"
# Access-Control-Expose-Headers: "true"
# Access-Control-Max-Age: "false"
# Access-Control-Allow-Credentials: "true"
Edit the routes.yaml File in the .platform Folder
# ---------------------------------------------------------------------------
# Uncomment the following when start a storybook in development or staging
# NOT for production environments.
#
# Follow with Integration of Varbase with Storybook
# https://docs.varbase.vardot.com/v/10.0.x/developers/theme-development-with-varbase/integration-of-varbase-with-storybook
#
# This will allow for a storybook sub domain to point
# at the storybook:http upstream
# ---------------------------------------------------------------------------
# "https://storybook.{default}":
# type: upstream
# upstream: "storybook:http"
Replace Site URL with an Environment URL
Edit the preview.js file in the .storybook folder
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';
}
}
