If you've ever worked with enterprise CMS platforms like Optimizely (formerly Episerver), you're probably familiar with the "waiting game" every time you build the project. Frontend workflows can sometimes feel stuck in 2015, relying on Gulp, Grunt, or mile-long Webpack configurations.
Recently, our team decided to tear down and rebuild the build system for our CMS Iv project. The goal was simple: Faster, Cleaner, and more Correct.
Here’s what we learned from our journey upgrading to Vite 4.0.
Goodbye "Loading...", Hello Vite!
The biggest and most satisfying change was switching from legacy bundlers to Vite.
Previously, every time we tweaked a SCSS or JS file, we had to wait several seconds (sometimes ten!) to see the change. With Vite, that number dropped to... a few hundred milliseconds. Vite's Hot Module Replacement (HMR) is a lifesaver. You edit a style, save, and boom, the browser updates instantly without a page reload. The coding flow feels significantly smoother.
One Theme to Rule Them All
We used to maintain three different themes (Classic, Modern, Luxury). It sounded cool, but in reality, it was a maintenance nightmare. Code styles were duplicated, and fixing a bug in one theme often meant forgetting it in another.
This time, we made a bold decision: Keep only the Modern theme.
Focusing resources in one place made the codebase cleaner than ever. We adopted the ITCSS (Inverted Triangle CSS) architecture to organize SCSS. No more 5000-line style.css files; everything is broken down into base, components, and layout layers that are super easy to manage. And of course, we said goodbye to the old @import syntax in favor of modern Sass @use.
Accessibility isn't just "Nice to Have"
One of the top priorities for Version 2.0 was achieving WCAG 2.1 AA compliance.
Honestly, the team initially thought, "we'll just add some alt tags and be done." But doing it right is much harder. We had to audit everything:
- Adding
aria-labelto icon buttons (like the hamburger menu). - Ensuring keyboard-only users could navigate the site seamlessly.
- Restyling
:focusstates so they are actually visible (never useoutline: noneunless you have a worthy replacement!).
The result is a site that looks great and is friendly to all users.
The Perfect Pair: ASP.NET Core
Frontend running independently is great, but how does it run smoothly in a .NET environment?
Our secret lies in simplicity. Instead of trying to force Vite to generate complex hashed filenames (like main.a1b2c3.js), we disabled hashing in Vite and let ASP.NET handle Cache Busting.
Just a small line of code in the Razor View:
The asp-append-version="true" attribute automatically appends a query string hash to the file path whenever the file changes. So we get great caching without having to update
Final Thoughts
Modernizing the frontend for a CMS project isn't just about upgrading technology; it's about upgrading the developer experience. Less time waiting for builds means less frustration and more time for creativity.
If you're stuck with legacy CMS projects, try "Vite-ifying" them. It is absolutely worth the effort!