Using Live Preview

CodeMix 2019.6.11 introduced the next generation of Live Preview. A Live Preview browser pane lets you see an immediate preview of modern web and Java EE applications, conveniently placed right next to the code you are editing. For some project configurations, you see changes in real time, as you type, without having to save your file.

Next generation Live Preview is available in CodeMix and Angular IDE, which is included with your  MyEclipse license.

Live Preview has been designed to be fairly intuitive, and in most cases it will “just work”, displaying the preview you expect when editing code. For supported file types, when we can determine the target URL to be displayed in the preview pane, the preview appears on the right hand side of the editor.

To toggle the preview pane, use the toggle control in the in-editor toolbar. Alternatively, you can use the Ctrl/Cmd+Alt+E shortcut.

Functionality Based on Application Type

Live Preview works differently based on the type of application you are working with—we’ll cover some of these differences below.

Modern Web Application

This section applies to editing files in modern web applications, like Angular, Vue, React, etc.—essentially, any Node-based application with a “serve” script.

  • Live Preview remains disabled until the application is served. If you attempt to turn Live Preview on, we offer to start serving the application for you.
  • as-you-type support is not available for these applications, the pane may update only after you save your change.
  • The framework’s build and reload technology determines whether the contents of the pane should be reloaded, and automatically reloads when appropriate. You can manually reload the page using the toolbar in the preview pane.

Java EE/HTTP Application

This section applies to files that are currently deployed to a running Java EE or HTTP server.

Note: If you are working in a Java EE project that is not deployed, or it is deployed, but the server is not started, see the next section.

  • To avoid unnecessary reloads, Live Preview automatically reloads the contents of the preview pane only if the URL is an exact match with the file being edited. Live Preview waits for the resource to be synched with the server before initiating the reload. You can manually reload the page using the toolbar in the preview pane.

Other Cases

If your application does not fit into the above two categories, it is internally deployed and locally served, for an optimal Live Preview experience.

  • as-you-type support is available, changes are relayed to the preview pane as you type, without you having to save the file.
  • With live relaying of changes, there should be no need to manually reload the page, but you are free to do so from the toolbar in the preview pane.

The benefit of local serve, is that your pages and applications are loaded from an HTTP server running behind the scenes, as opposed to directly from the file system with a file:// URL. As a result, they work in a manner that’s much closer to their real world behavior.

Security Note: You may want to view a locally served application in an external browser. Simply copy the URL using the button on the toolbar and paste into your external browser. The _cmAuth parameter in the URL has a value that’s unique to your Eclipse instance, if this parameter is omitted from the URL, the external browser will not be able to access the URL. This is a security feature, preventing other users on the same system from being able to load this URL. Once a single page is loaded with the parameter, it may be omitted from further URLs in the same browser/profile, as a cookie is saved with the auth details.

Settings

When enabled, the live preview pane automatically collapses if the editor pane isn’t wide enough for both your source and the preview pane to be displayed side-by-side. In a collapsed state, the preview expands on hover.

To control the width of the pane in various states, see the Preferences>CodeMix>Miscellaneous >Live Preview page.

To control the file types for which Live Preview will be available, see the Preferences>CodeMix>Miscellaneous>Live Preview>Includes/Excludes page.

How Live Preview Determines the URL to Load

The target URL is the URL loaded in the preview pane. Determining the right URL to load as you move across files in your project, or across projects in the workspace, is key to an optimal Live Preview experience.

  • Modern web applications—The URL loaded for files across the project is normally the URL of the root of the application. If you would like a different URL to be loaded for a given file, see Navigating to Different Targets where you will only need to override this URL one time. 
    Non-modern web applications—If you are editing a page that is directly rendered, like an HTML, JSP or PHP page, the URL to be loaded is typically obvious, and automatically loaded by the preview pane. This behavior stands irrespective of whether the file is locally served or deployed to a running HTTP server.
    In these cases, the toolbar displays the eye with filled blue circle icon.
  • Stylesheets—If the stylesheet was previously loaded by a URL displayed in the preview pane, Live Preview remembers the association, and loads that URL. The toolbar displays the eye with hollow blue circle icon. This association is not persisted across Eclipse sessions.
  • If Live Preview is unable to determine the URL to be loaded for a file being edited, it is disabled when the file is opened. This is indicated by the Eye with question mark icon. When you click this icon, you can choose to enter a URL to be loaded.
Note: You can override the URL that’s loaded by the first two techniques with a custom URL (see below). In such cases, the custom URL takes precedence over all other mappings.