How we modernised our frontend tooling using Vite and Storybook
13 Mar 2025, 5:00 am
30 mins
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.
This session will cover usage and setup of all the frontend linting, testing, prototyping and build tools needed for a Drupal project.
Learn about:
* Implementing Vite library mode for Drupal sites, including Twig and React integration.
* Setting up Storybook using Vite, Twig and React with tips on how to structure and maintain 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.
In addition we'll go over the old guard of tools including Rollup, Webpack, Gulp, and Babel and speak to what makes modern tooling so easy to work with.
This session will cover usage and setup of all the frontend linting, testing, prototyping and build tools needed for a Drupal project.
Learn about:
* Implementing Vite library mode for Drupal sites, including Twig and React integration.
* Setting up Storybook using Vite, Twig and React with tips on how to structure and maintain 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.
In addition we'll go over the old guard of tools including Rollup, Webpack, Gulp, and Babel and speak to what makes modern tooling so easy to work with.
