Hot Reload

Overiew

From the Quantum Visualizer V9 Service Pack 1 release, Quantum Visualizer has introduced the Hot Reload feature in the live preview of Web apps. The Hot Reload feature improves the Live preview experience within Quantum Visualizer by reducing the build and preview time for a live preview.

By using the Hot Reload key, developers can view changes made to the app immediately, adjust their UI as required, and fix any code issues. Developers can also build their UI incrementally by viewing their changes in the live preview by using the Hot reload feature. The Hot reload feature also reduces the application build time. Earlier, to view changes in the live preview, developers always had to build the application.

While in the Visualizer canvas, you can use the Ctrl+Shift+R combination to invoke the Hot reload feature in the Live Preview window.

Use the Hot Reload feature in Quantum Visualizer

Prerequisites

Following are the prerequisites to use the Hot Reload feature in Quantum Visualizer:

  • Ensure that you have a working Quantum account.
  • Ensure that you have Quantum Visualizer V9 Service Pack 1 or later installed on your computer.

Using Hot Reload

In the following steps, we will take you through the steps of using the Hot Reload feature using a sample app from Temenos Forge .

  1. From the main menu of Quantum Visualizer, navigate to Temenos Forge > Browse.
  2. In the search bar, type RecipientsWeb.
    A list of applications appears.
  3. From the list, select RecipientsWeb.
    The details of the RecipientsWeb app appears.
  4. Click Import to Workspace.
    It may take some time for Visualizer to import the app.
  5. From the Main menu, navigate to Build > Live Preview Settings
  6. Select Responsive Web.
    Ensure that any other selected platforms are unselected.
  7. Click Save & Run.
    A dialogue with the Visualizer preview appears.

  8. On the Visualizer canvas, change the button text from Login to Submit.
  9. Navigate to the Live Preview window again, and then select the Hot Reload key (Ctrl+shift+R).
    Changes made on the form will reflect in the live preview window.

Limitations

  • Hot reload is only supported for MVC applications, changes are reflected in forms and controllers.
  • Hot Reload is only supported on the Responsive Web platform.
    This is to avoid security issues that may occur in the Release Mode builds.
  • Hot reload only works on the top-level form that you are viewing.
  • If you make any changes to the Quantum Fabric app, the Hot Reload feature will not work.
    If there are any changes made to the Quantum Fabric app, you must re-initiate the Live Preview.
  • Hot Reload does not reflect the changes made to the following entities:
    • i18N resources
    • Themes
    • Custom widgets
    • Custom fonts
    • Templates
    • Components
    • Changes to module files except for form controllers.

    NOTE: From the V9 Service Pack 5 release, support for the Hot Reload feature has been added to MVC 2.0 apps, Form Controllers (including Form Controller Extensions), Segment Templates, and Components (including component controller modules, component controller extensions, and widget actions).