DEV Community: Hervé Guétin

How to develop modern Shopify Custom Apps with Brush

Hervé Guétin — Sun, 25 Jan 2026 10:05:23 +0000

Building Shopify custom applications from scratch can be challenging, especially if you’re tired of rewriting boilerplate for every project. The Shopify developer ecosystem has tutorials, but open-source starter kits for production-ready apps are still rare.

That’s why I built Brush, a full-stack starter kit designed to give developers and agencies a modern, maintainable, and scalable foundation for complex Shopify custom apps.

In this post, I’ll cover:

Why a starter kit matters
What Brush includes
How its stack accelerates development
When to use it in real projects

Why a starter kit for Shopify Custom Apps matters

Shopify Custom Apps allow you to build bespoke backend logic, admin interfaces, and storefront enhancements tailored to a specific store. Unlike public apps, custom apps are exclusive to a shop’s needs.

But building them involves:

Authentication to the Shopify APIs
Backend data modeling
Frontend integration with Shopify themes
Build tooling and deployment
Localization and validation
And, of course, a scalable hosting architecture

Without a starter kit, you spend weeks wiring this infrastructure before adding meaningful features.

What Brush actually is

Brush addresses repetitive setup work and provides a modern, cohesive framework for building Shopify Custom Apps. It’s open-source and aimed at developers who want:

High-quality, maintainable code
Scalable architecture for quality apps
Production-ready tooling and patterns

Instead of reinventing the wheel for each project, Brush gives you a reliable foundation for serious custom app development.

The stack behind Brush

Brush combines modern tools chosen for real-world web app development:

🟢 Gadget.dev — Backend & hosting

Gadget.dev powers the backend (hosting, database, scheduling) and exposes a REST API for Shopify themes and admin pages. It handles authentication, Shopify API integration, and provides production-ready backend infrastructure.

🟢 Zod — Data validation

Zod installed out-of-the-box so that you can validate data flowing between your Shopify theme and backend, ensuring type safety and consistency throughout your app.

🟢 Vite — Fast frontend builds

Vite builds a modern frontend that integrates seamlessly with Shopify themes, producing lightweight (<35 kB) optimized bundles for fast performance.

🟢 Alpine.js — Lightweight frontend reactivity

Alpine.js provides reactive components within the Vite app, enhancing server-rendered Shopify themes without adding bloat.

🟢 i18next — Unified translations

i18next delivers a single source of translations across frontend and backend. Brush makes this possible by using Shopify theme locale files for consistency.

🟢 TypeScript everywhere

Brush uses TypeScript throughout the stack: backend (Gadget.dev), frontend (Vite/Alpine), and data models. This improves maintainability and help catch bugs early.

How Brush helps you optimize your workflow

Instead of spending time setting up database, wiring up authentication, crafting API layers, configuring build tooling, addressing localization and so on, Brush gives you these foundations, so you can focus on:

Building business logic
Adding custom admin pages
Hooking into Shopify webhooks
Creating advanced storefront features
Interacting with 3rd party services (ERP, CRM, ...)

This significantly reduces time-to-market and ensures scalable and maintainable code from day one.

When Brush makes sense

Brush is ideal for:

Any Shopify Custom App
Projects requiring high code quality and long-term maintainability
Developers who want modern tooling, fast builds, and type safety

Closing thoughts

Shopify Custom Apps empower bespoke workflows and deep integrations into information systems. But building them is non-trivial. Brush gives developers a modern starter kit to reduce repetitive setup, improve maintainability, and accelerate development.

Check it out: https://brush.maddlen.fr/

Zermatt.dev: Speed Up Your Magento Workflow with Hot Reloading

Hervé Guétin — Sat, 01 Feb 2025 16:42:37 +0000

Ever find yourself constantly hitting refresh in the browser just to see changes after tweaking your code? Yeah, we’ve all been there. It’s tedious and it slows you down.

That’s where Zermatt v1.2 comes in with hot reload. This feature helps streamline the development process by automatically updating the browser as you work — without having to manually refresh. Let’s break down how Zermatt’s hot reload works, what it does, and how it can improve your workflow.

👉 Hot reload documentation
👉 Release notes
👉 Zermatt.dev landing page

What is Hot Reloading?

Hot reloading automatically reflects code changes on the browser without the need to reload the page manually or even without any reload at all. This means more productivity and less interruption to a developer's workflow.

How Does Hot Reloading Work in Zermatt?

Zermatt's hot reload works by monitoring changes in project’s files and automatically pushing them to the browser. The behavior is different for CSS and Javascript:

CSS and Styling Changes: These get reflected in the browser immediately — no page reload needed. This is great for fine-tuning styles or experimenting with design changes on the fly.
JavaScript Changes: These do trigger a full page reload. So, when JavaScript (including AlpineJS components) changes, Zermatt reloads the entire page to reflect those updates. While this might seem a little less efficient than the hot CSS reload, it ensures that any changes to JS or DOM manipulation are fully applied.

Here’s a quick breakdown of what happens in each case:

CSS: Changes are applied instantly without refreshing the page.
JavaScript: Full page reload happens after changes.

Why Is This Beneficial?

Instant Styling Feedback: When working on the look and feel of a Magento store, the ability to instantly see changes is a huge time-saver. It gets easier focus on tweaking design without waiting for the browser to reload every time.
Fast Iteration for JS Updates: Even though JavaScript changes trigger a page reload, this is still way faster than manually refreshing. Plus, this produces a fresh page state with every reload.
Streamlined Workflow: Not having to refresh or manually inject updates into the browser makes the workflow smoother. Zermatt handles the grunt work, so you don’t have to.

How to Use Hot Reload with Zermatt

Getting started with hot reloading in Zermatt is a breeze. Here's how to can enable it in a Zermatt-enabled Magento theme:

Install Zermatt

If you haven’t already, head over to Zermatt’s official website and follow the quick-start guide to install the framework.
Enable Hot Reloading

Zermatt enables hot reloading out-of-the-box for CSS and styles. For JavaScript, it will automatically reload the page when changes are detected.
Start Editing and Watch Changes

Once you’re up and running, just start editing your code. If you're modifying CSS or other styles, watch as your browser updates without a full reload. For JavaScript, any tweaks will trigger a full page reload, but you’ll still save time compared to manually refreshing the page.

Wrapping Up

Zermatt's Hot Reload feature is a must-have productivity booster. It allows to work faster by automatically pushing styling and Javascript updates to the browser, avoiding the hassle of manual refreshing.

Zermatt.dev: Style it your Way with SASS or TailwindCSS

Hervé Guétin — Thu, 12 Dec 2024 10:33:48 +0000

With Zermatt v1.1.0 comes a new major feature: the ability to style modular components or even a full Magento theme. With native support for SASS, seamless integration with TailwindCSS, and many customization options, Zermatt empowers developers to build modern, performant, and maintainable designs within Magento.

👉 Styling documentation
👉 Release notes
👉 Zermatt.dev landing page

A Look at the Architecture

At the heart of Zermatt’s styling lies a robust architecture that handles CSS compilation and hierarchy management. Here’s how it works:

File Discovery: Zermatt scans for all .scss files within web/zermatt/**/ directories across vendor, app/code, and the current theme.
Hierarchy Processing: The system processes these files to respect the hierarchy, ensuring that theme-level styles take precedence over app/code and vendor styles.
Centralized Compilation: A zermatt-lock.scss file is automatically and transparently generated, containing @use directives for all discovered .scss files.
ViteJS Integration: ViteJS compiles this all-in-one file via the SCSS preprocessor, producing the final optimized and tree-shaked dist/zermatt.css file for deployment.

For advanced use cases, the zermattLock() function allows developers to create custom SCSS entry points tailored to specific needs.

Hierarchy Management

Zermatt’s styling hierarchy ensures that styles are modular and predictable. The system applies styles in this order:

vendor styles
app/code module styles
Theme-level styles

For example, a theme-level .scss file named the same as one in a module will completely override the module’s file (hard rewrite). Alternatively, new files can be added to extend or customize styles without overwriting existing ones (soft rewrite).

Writing SCSS the Zermatt Way

Zermatt allows developers to write SCSS in any web/zermatt/**/ directory, regardless of whether it resides in vendor, app/code, or the current theme. This modular approach ensures clarity and maintainability.

For instance, in app/code:

app/code/Vendor/Module/view/frontend/web/zermatt/[ANY_DIR]/vendor-module.scss

Or in a theme:

theme/Vendor/Theme/web/zermatt/[ANY_DIR]/custom-stuff.scss

Full Customization with SASS and TailwindCSS

Option 1: SASS Customization

For those seeking full control, Zermatt supports replacing its default SCSS processing with custom entry points.

Option 2: TailwindCSS Integration

Adding TailwindCSS to Zermatt is straightforward and opens up a world of utility-first styling.

Get Started Today

Zermatt’s styling capabilities provide developers with the tools to create modular, scalable, and customizable frontend components and themes. Whether leveraging SASS, integrating TailwindCSS, or building a completely bespoke theme, Zermatt ensures developers have the power and flexibility to match any styling need.

Explore the Documentation and start building with Zermatt today!

Zermatt.dev: A Frontend Framework for Magento

Hervé Guétin — Sun, 01 Dec 2024 22:08:45 +0000

The landscape of Magento (Adobe Commerce) frontend development has evolved significantly, yet it often remains stuck with legacy technologies like Knockout.js and RequireJS. Zermatt, a personal project that I am pleased to present, aims at simplifying frontend development by delivering an incremental, lightweight, component-driven approach fully integrated in the Magento framework.

👉 Zermatt.dev landing page
👉 Demo
👉 Documentation

The Challenges of Magento Frontend Development

Magento’s traditional frontend stack can feel cumbersome, especially with heavy reliance on Knockout.js and the complexities of integrating modern JavaScript libraries. Developers face several key challenges:

Complexity in Customization: Overriding templates and creating custom JavaScript logic can lead to rigid structures that are difficult to maintain. Magento’s reliance on Knockout.js and RequireJS often results in cumbersome, outdated development practices.
Performance Bottlenecks: The layered and interdependent frontend structure can slow down page rendering and increase load times.
Limited Flexibility: Managing dependencies and updates across themes and modules is often prone to errors. Creating and managing reusable components is complex.
Data Access: Sharing data between backend and frontend components requires complex workarounds, reducing flexibility.
Steep Learning Curve: Understanding the intricacies of Magento’s frontend stack can be daunting, especially for those transitioning from modern JavaScript frameworks.

How Zermatt.dev can help

Zermatt.dev leverages Alpine.js, allowing developers to create reusable Javascript modules with minimal overhead. These modules can be easily managed through configuration, enabling rewriting features for flexibility in customization.

👉 More about the architecture

Incremental Adoption

Zermatt.dev supports gradual migration, allowing teams to replace Knockout.js and RequireJS at their own pace while maintaining existing functionality.

Modularity

Zermatt.dev’s architecture allows developers to define modular AlpineJS components that can be easily integrated, reused across templates and distributed. These modules can be hard or softly rewritten, enabling both complete overrides and incremental enhancements without affecting core logic.

👉 More about modules

Theme Inheritance

The framework supports Magento’s native theme fallback system, allowing for clean inheritance and overrides. Developers can easily create child themes that selectively override parent modules without duplicating logic.

👉 More about themes

Data Handling

With built-in support for backend data forwarding, Zermatt simplifies passing data from Magento's backend to the frontend, either through scoped properties or global variables. It also eliminates boilerplate code like json_encode and escapeJs.

👉 More about backend -> frontend

Forms

Zermatt.dev leverages Laravel Precognition to provide a form management feature with real-time server-side validation. It supports both synchronous and AJAX form submission.

👉 More about forms

Internationalization

Zermatt.dev integrates i18next with Magento’s i18n and currency system, ensuring seamless localization through its $t() and Money objects, which supports translation and interpolation.

👉 More about i18n

👉 More about money

Other features

Build process: Leveraging Magento’s CLI commands, Zermatt.dev seamlessly integrates with setup:static-content:deploy for efficient asset management in CI/CD pipelines.

Events: Zermatt comes with a powerful pub/sub implementation that allows all Javascript code to emit and react to one or several events. Synchronously or asynchronously.

Partials: Extract parts of templates into smaller, reusable pieces without touching XML layout files.

CLI: Zermatt has a light CLI for easy operations.

👉 Zermatt.dev landing page
👉 Demo
👉 Documentation

About the author

My 25 years of experience in digital as a merchant, consultant, expert and CTO have led me to listen to many clients to build optimized solutions.

I have been using Magento since 2008 on an everyday basis and could not help noticing the increasing gap between its frontend layer and the evolving standards of the industry.

After numerous frontend implementations on many large and small projects, I wished I could have a flexible tool that produces modern JS that is flawlessly discussing with the Magento stack.

Zermatt.dev is an attempt to do that.