Hot reload

When in development, Zermatt makes use of hot reload to update Javascript and CSS files in real time.

Conditions for hot reload to work

• Magento must be in developer mode (bin/magento deploy:mode:set developer).
• Zermatt must be in developer mode in the theme (npm run dev) and the ViteJS server address MUST BE http://localhost:5173 (default ViteJS config).

Javascript hot page reload

Zermatt is watching all JS files matching these patterns:

• in app/code: /app/code/*/*/view/frontend/web/zermatt/**/*.js. In other words, all JS files in the zermatt directory of modules.
• in current theme: /app/design/frontend/CURRENT/THEME/web/zermatt/**/*.js. In other words, all JS files in the zermatt directory of the current theme.

As soon as one of those watched JS files is saved, a page reload happens.

Manual reload instead of hot reload

In some situations, having the page reload on each file change may not be the developer experience you like. In order to do manual reloads instead of hot reload, please start the Zermatt developer mode like this:

npm run dev:noreload instead of npm run dev.

Instant CSS hot reload (HMR)

Zermatt is watching all SCSS files matching these patterns:

• in app/code: /app/code/*/*/view/frontend/web/zermatt/**/*.scss. In other words, all SCSS files in the zermatt directory of modules.
• in current theme: /app/design/frontend/CURRENT/THEME/web/zermatt/**/*.scss. In other words, all SCSS files in the zermatt directory of the current theme.

For internal Zermatt purposes, it also watches SCSS files in vendor (see CSS Styling) but one should not change those files.

As it is real HMR, changes are instantly visible without the need of a page reload.

Note when using TailwindCSS

As stated in CSS Styling, it is possible to use TailwindCSS with Zermatt. But please be aware that, because of the nature of TailwindCSS requiring the need of HTML updates with utility classes, HMR is not possible. A full page reload will always happen when updating PHTML files.