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.
Top comments (0)