Video: How we modernised our frontend tooling using Vite and Storybook
What do you get when you add Vite + Storybook + Pinto together to theme Drupal sites? Modern tooling that’s easy to work with!
Summary
We’ve been using this combination for our last few major projects with great results, so we decided to share, piece by piece, how we conducted the overhaul that led us to move away from old guard tools such as Rollup, Webpack, Gulp, and Babel.
In the video, Jack covers the usage and setup of all the frontend linting, testing, prototyping and build tools required. In this scenario, Vite becomes the single source of truth to build frontend assets, Storybook documents them, and Vitest tests them - with one config file to rule them all.
You will learn about:
Implementing Vite library mode for Drupal websites, as well as Twig and React integration.
Setting up Storybook using Vite, Twig and React. Plus tips for structuring and maintaining a component library.
Storybook test runner for automated interactivity, snapshot and accessibility testing.
Vitest for everything else.
Eslint and Stylelint for linting with minimal configuration.
Integrating Pinto and Storybook.
Watch the video
Related Articles
Vite and Storybook frontend tooling for Drupal
We’ve just completed an extensive overhaul of our frontend tooling, with Vite and Storybook at the centre. Let’s go over it piece by piece.
Nice Things™️ for Front end devs with Storybook, Vite, Twig and Drupal
In a lightning-fast video, find out how to set up a Drupal project for component-driven design with Vite, Storybook and Twig.
Drupal front-end nirvana with Vite, Twig and Storybook
We're proud to announce the release of vite-plugin-twig-drupal, a plugin for Vite that we hope will improve your workflow for front-end development with Drupal.