Building Zendesk Apps with Astro
Why I use Astro to build client-side Zendesk Apps.
Sun Oct 19 2025 - 4 min read
INFO
Intro
I’ve been building custom apps in Zendesk for almost 10 years. No matter how far the platform has come, there will always be more use cases that are business specific that will require something extra.
While the Zendesk Apps Framework (ZAF) provides everything necessary to build these apps, the traditional development approach comes with some friction points that can slow down development and make maintenance more challenging. Astro offers a modern solution that addresses these pain points while maintaining full compatibility with the ZAF.
How Zendesk Apps Are Built
The Zendesk Apps Framework requires a specific structure:
- A
manifest.jsonfile defining your app’s configuration - HTML templates for your app’s UI
- JavaScript to interact with the ZAF Client API
- CSS for styling
For simple apps, this works fine. You can write vanilla HTML, CSS, and JavaScript, package everything up, and deploy. But as apps grow in complexity, this approach starts to show its limitations.
The Traditional Challenges
TypeScript Support
Out of the box, there’s no TypeScript support. If you want type safety and modern JavaScript features, you need to set up your own build process with tools like Webpack or Rollup. This means configuring loaders, managing dependencies, and maintaining build scripts alongside your app code.
Code Bundling and Optimization
Similarly, there’s no built-in bundling or optimization. You’re responsible for:
- Minifying your code for production
- Managing dependencies and imports
- Optimizing assets
- Handling CSS preprocessing
Again, all of this requires manual setup and configuration.
Development Experience
Without modern tooling, the development workflow becomes tedious. Make a change, manually refresh, check the result. No hot module replacement, no automatic reloading, just the traditional edit-save-refresh cycle. Pair that with the fact that many of these apps can take a few minutes to load a bunch of data from the Zendesk API or external sources, and you start losing a significant amount of time just waiting to load the same data over and over as part of this cycle.
How Astro Solves These Challenges
TypeScript by Default
Astro includes TypeScript support out of the box. No configuration needed. Just start writing .ts or .tsx files and everything works. Type checking, autocomplete, and
all the benefits of TypeScript are available immediately.
Modern Build Pipeline
Astro handles all the bundling and optimization automatically. Your code is:
- Bundled efficiently
- Minified for production
- Optimized for performance
- Ready to package for Zendesk
You focus on writing your app, Astro handles the build process.
Hot Module Replacement
During development, Astro provides instant feedback through hot module replacement. Changes appear in your browser immediately without the need to reload the app. This alone dramatically speeds up the development cycle and makes iteration much faster.
Framework Flexibility
One of Astro’s biggest advantages is framework flexibility. You can use:
- React
- Vue
- Svelte
- Solid
- Or any other supported framework
Choose the tools you already know, or pick the best framework for your specific use case. Astro doesn’t lock you into a single approach.
The official ZCLI tool actually has a scaffold for React available, but I personally found it to be pretty bloated. The last time I tried to use it, I couldn’t even get it to compile with all of the boilerplate that it comes with, before I had even made changes.
Additional Benefits
Component-Based Architecture
Astro encourages a component-based structure that makes your code more maintainable and reusable. Build your UI in logical pieces that can be tested and updated independently. This also makes it much easier to re-use code in many apps. I’ve built a large variety of apps and many of them re-use some of the same components.
Island Architecture
Astro’s island architecture means you only ship JavaScript for the components that actually need it. Static content remains static, keeping your app lightweight and fast—important when running inside a Zendesk iframe.
Modern Tooling
Beyond the basics, you get access to the entire modern web ecosystem:
- CSS preprocessing (Sass, Less, etc.)
- PostCSS for advanced CSS features
- Image optimization
- Asset handling
- And much more that Astro offers
Considerations
While Astro solves many problems, there is a tradeoff to consider.
You’ll need to configure Astro’s build output to match Zendesk’s expected structure. This is pretty straightforward at a glance but does require understanding both systems including the underlying tools that Astro uses during the build process. My template repo linked at the bottom of this post has some dev tooling that I’ve built to automatically handle this for me.
Conclusion
Astro brings modern development practices to Zendesk app development. TypeScript support, automatic bundling, hot module replacement, and framework flexibility all contribute to a better development experience and more maintainable code.
For complex apps or developers already familiar with modern frameworks, Astro is an excellent choice and my personal choice. The improved developer experience and built-in optimizations make it easier to build, test, and maintain your Zendesk apps.
I’ve created a template repository that demonstrates this setup and provides a starting point for your own Zendesk apps:
