I have set up this repository to demonstrate a new workflow that has been made possible in Drupal 10.1 thanks to the inclusion of the single directory components (SDC).
After you complete the installation process below you'll be able to create new components in Drupal.
We prefer to use ddev for local development. If you don't have it installed, install it using their documentation.
Then...
- Clone this repository: 'git clone https://github.com/cosmicdreams/drupal-storybook.git'
- Build:
cd drupal-storybook && ddev start && ddev composer i && ddev yarn - Install Drupal:
ddev drush si --account-name=admin --account-pass=admin demo_umami -y - Install modules:
ddev drush en cl_server sdc_examples -y - Login to Drupal and modify the cl_server permissions to permit anonymous users to
- Run
ddev yarn storybookand navigate to https://drupal-storybook.ddev.site:6006
It's quite easy to have issues with storybook and drupal thanks to CORS. If you have trouble loading components via this setup, please first check:
- The permission for the cl_server module is set to allow anonymous users to access the component library.
- The CORS configuration is actually loading:
ddev drush php:eval "var_export(\Drupal::getContainer()->getParameter('cors.config'));" - Then, you can check if your component is named properly or has some other kind of error.
- Also, check our browser's dev console. It usuallly has a lot of good debugging detail logged there.