How we modernised our frontend tooling using Vite and Storybook
Track: Web Tools & Complementary Technologies
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.
Speakers
Jack Taranto
Jack has been working with Drupal since around 2006, and has been a frontend developer with PreviousNext since 2009. Jack works remotely in the Southern Highlands, NSW.