Using Live Preview

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  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  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  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.

Navigating to Different Targets

In some cases it may be necessary to set the URL loaded by the preview pane manually, or, you may just wish to navigate to another page. You can change the loaded URL using the Live Preview toolbar.

1. Click the URL (or page title) in the toolbar. 
   
   
2. Enter a URL in the Location field.
3. Select the behavior:
   Use this URL only for <filename>—URL is loaded only when the current file is being edited.
   Use this URL for all files in this folder—URL is loaded for all files in the same folder as the file being currently edited.
   Use this URL for all files in this project—URL is loaded for all files in the same project as the file being currently edited.
   Only update location in browser; don’t remember—Navigate to this URL one time only, URL is not reloaded when you edit this file again.

Updating URL Mapping

To reset or change any of the mappings made above, select the file, folder or project for which you made the mapping and open its properties via the context menu. In the Live Preview page, you can now choose to go back to the default behavior with the, “Derive URL from active editor” option, or specify a new URL in the available field.



If you navigate away from the target URL of a file, the  icon is enabled, clicking it takes the preview pane back to the target URL.

Preventing Automatic Navigation

If you don’t want the preview to change as you move between editors, click the  icon on the Live Preview toolbar to detach the preview pane. Or, clear the Follow editor selection when possible checkbox on the Preferences>CodeMix>Miscellaneous>Live Preview page.

To update or change the loaded URL, click the URL (or page title) in the Live Preview toolbar to bring up the “Browse to Location” dialog.