Boosting Performance and Type Safety with Vite and TypeScript in Strapi 5

As part of our Strapi 5 Launch Week, we’re rolling out new features and improvements every day. On Monday, we introduced the Draft & Publish and Content History features to streamline content management workflows. On Tuesday, we focused on Developer Experience improvements, making Strapi even more user-friendly for developers.

Today, we’re excited to announce two key changes that significantly improve your experience as a developer: the adoption of Vite as our default bundler and enhanced TypeScript support. These updates are designed to make Strapi faster, easier to configure, and provide stronger type safety for your projects.

Let’s break down why these changes matter and what they mean for your workflow.

Vite Is the New Default Bundler for Faster Builds

In Strapi 4, we used Webpack as our bundler. While Webpack is powerful, it can sometimes be cumbersome to configure, and its performance — particularly in development mode — left room for improvement. That’s why we decided to switch to Vite in Strapi 5.

What Makes Vite Better?

• Faster Dev Mode: One of the biggest reasons we chose Vite is its blazing fast hot module reloading in development. Vite leverages esbuild, a Go-based tool, to bundle code faster than traditional JavaScript-based bundlers. This means when you’re making changes in dev mode, you’ll see updates almost instantly, keeping your flow uninterrupted.
• Zero Configuration: Vite takes a zero-config approach. Instead of setting up plugins and managing complex configurations, it just works out of the box, making it much easier for both beginners and experienced developers. This saves you time so you can focus on building, not configuring.
• Future-Proof: Vite is rapidly evolving and has already established itself as a key player in the frontend ecosystem. Future versions will introduce features like the Environment API, enabling better management of server-side and client-side code. We’re excited about what’s coming and how Vite will continue to improve Strapi’s performance and flexibility.

In short, Vite gives Strapi 5 faster performance, especially in development, and simplifies your workflow, allowing you to focus on what matters: building your app.

Strapi Supports ViteConf 2024!

We're proud to support ViteConf 2024, a key event for the Vite community! As passionate advocates for modern web development, we're excited to be part of this growing ecosystem. We invite you to join this amazing conference, where you can dive into the latest innovations in the Vite world and connect with other developers.

👉 Join ViteConf 2024!

More Control, Less Guesswork with TypeScript in Strapi 5

We know how important TypeScript is to the developer community, and in Strapi 5, we’ve made significant upgrades to how we support it. From building apps in TypeScript to improving type safety, our goal was to make Strapi’s TypeScript experience as smooth and powerful as possible.

What’s New in TypeScript for Strapi 5?

• Complete Codebase Migration: Strapi 5 has moved from being written in plain JavaScript to being almost entirely TypeScript. This wasn’t a small task, but it means we can now deliver better type definitions, making the developer experience smoother and more reliable.
• Improved Type System: We’ve overhauled Strapi’s type system, introducing clearer type names and better namespace organization. This means it’s easier to import the types you need and start building with confidence.
• Better Inline Documentation: Types now come with inline documentation, meaning you can see clear descriptions and examples of how to use them without needing to jump back and forth between your editor and the docs.

Real-World Benefits of TypeScript in Strapi

The biggest advantage of Strapi 5’s TypeScript support is how it simplifies data manipulation. With built-in type safety, you can write code that’s not only more predictable but also easier to maintain.

For example, when fetching data, TypeScript provides autocompletion and validates your queries in real-time:

1const articles = await strapi.entityService.findMany('api::article.article', {
2  filters: {
3    title: { $startsWith: 'Strapi' },
4  },
5  sort: { title: 'asc' },
6  populate: { category: true },
7});

Here, TypeScript ensures that the filters and populate properties you use are correct, saving you from making common errors or having to check documentation constantly.

Beyond that, TypeScript makes it easier to handle complex queries, such as applying filters, sorting, and pagination, with full type safety. You can be sure that your code will work the way you expect.

What’s Next for Vite and TypeScript in Strapi?

While the improvements in Strapi 5 are significant, this is just the start. We’re continuing to refine TypeScript integration to leverage its full capabilities, making future APIs and workflows even more streamlined.

As for Vite, we’re excited about what the future holds as it evolves with new features like the Environment API and broader framework support.

If you want to dive deeper, we recommend this video with Alex and Jean-Sébastien from the Strapi team.

If you want to dive deeper, we recommend this video with Alex and JS from the Strapi team.

Join Us for the Strapi 5 Launch Stream and Community Call on October 8th

To celebrate the launch of Strapi 5, we invite you to join us for a special Strapi Stream and community call on October 8th. This is your chance to connect with the team and learn more about what's new in Strapi 5. We'll be covering the latest updates, discussing how to migrate your projects smoothly, and diving into the new Plugin CLI. It's also the perfect opportunity to ask any questions you might have during our open Q&A session.

📅 Date: October 8th

Global Strapi 5 Launch Parties – Join One Near You

To make the launch of Strapi 5 even more special, our global partners are organizing exclusive launch parties around the world. These events are a fantastic opportunity to celebrate the release, network with other Strapi users, and get firsthand insights from our partners. Whether you’re a seasoned Strapi expert or new to the platform, you’ll find great conversations, live demos, and exciting content at these gatherings.

Find a launch party near you and join in the celebrations!

Start Building with Strapi 5 Today

If you haven’t already upgraded, now is the perfect time to dive into Strapi 5. With Vite as your default bundler and a fully integrated TypeScript experience, building fast, reliable, and scalable projects has never been easier.

Check out our Strapi 5 documentation for more details on these updates, and feel free to join our live stream for any questions or feedback.