Enhancing Umbraco development with Vite

At Fluent, we're constantly exploring ways to streamline our development processes, especially when it comes to managing front-end assets in Umbraco projects. In this post, we'll delve into our journey of integrating Vite, a lightning-fast bundler, with Umbraco, and how it revolutionised our development workflow.

If you need more technical details and insights into our integration process, I have a comprehensive version of this journey in my technical blog post here.

The evolution of website build tooling

In the past, Umbraco developers relied heavily on tools like Grunt or Gulp for preprocessing, script bundling and asset optimisation. However, with the rapid advancements in web development, newer solutions like Webpack and Vite have emerged as superior alternatives, offering improved performance and modern development experiences.

Enter Vite.AspNetCore

Vite.AspNetCore, a nuget package, proved to be a game-changer in integrating Vite with Umbraco projects. With its middleware, seamlessly incorporating Vite into our ASP.NET Core server became a breeze.

Configuring the setup

Setting up Vite with Umbraco required a few tweaks beyond just installing the nuget package. We had to ensure our project structure aligned with Vite's expectations and make necessary adjustments in configuration files and project settings.

Organising output paths

One challenge we encountered was managing output paths, especially in a local development environment where existing site resources cluttered our output directory. To address this, we customised Vite's output directory, enabling cleaner builds and easier version control management.

Harnessing the power of spritemaps

A key feature we needed was spritemap generation for combining SVG icons. Utilising the vite-plugin-svg-spritemap, we streamlined the process, overcoming initial hurdles with timely updates from the plugin developer.

Simplifying integration and bridging technologies

To improve code aesthetics and developer productivity, we developed custom Razor helpers, which streamlined the inclusion of assets and simplified referencing spritemaps in our views. We won't get into the nitty-gritty technical now—instead, a reminder to head over to my technical blog post here.

Embracing modern development practices

By adopting Vite, we have embraced modern development practices, empowering our team to deliver faster, more efficient Umbraco projects. With features like hot module reloading and seamless integration, our development workflow has become more agile and enjoyable.

Conclusion

Our journey with Vite has been nothing short of transformative. By utilising its speed, flexibility, and modern tooling, we've elevated our Umbraco development process to new heights. As we continue to explore innovative solutions, we're excited about the possibilities Vite brings to the table, paving the way for future advancements in web development.