loading table of contents...
6.4.2.1.2. Preparing the Preview

Immediate preview of your changes requires a local preview CAE on a Tomcat in development mode and the usage of local resources.

Internally, the CAE handlers and link schemes will map the linked resource objects of a page content in the repository to the files in the local workspace. For this, you have to do the following configuration:

  1. Add the paths to the resources of your theme to the extraResourcePaths property of the Resources element in the tomcat-context.xml file of the preview CAE Tomcat.

     <Resources className="org.apache.naming.resources.VirtualDirContext
extraResourcePaths="${project.basedir}/../../extensions/corporate/corporate-theme/src/main/resources/META-INF/resources,
"${project.basedir}/../../extensions/corporate/corporate-theme/target/resources,
${project.basedir}/../../extensions/corporate/corporate-cae/src/main/resources

    Example 6.15.  Theme paths in tomcat-context.xml


    [Note]Note

    All paths must be in one line, separated by commas.

  2. To start the local Tomcat in development mode, use the following command: 

    mvn -pl :cae-preview-webapp tomcat7:run -Pdevelopment-ports
    -Dinstallation.host=<YourCMS>

    1. The Maven setting cae.use.local.resources of the preview CAE must be "true" in order to use local resources. This is the default setting.

    2. The Maven setting cae.developer.mode of the preview CAE must be "true" in order to run Tomcat in developer mode. This is the default setting

      Local resources only work with a CAE started in a Tomcat in development mode. Otherwise, the CAE will not initialize, throwing an IllegalStateException. If development mode is turned on, JavaScript and CSS content will not be minified and merged into one JavaScript and one CSS resource.

    Open your browser at http://localhost:40081/blueprint/servlet/<YourDemoSite>.

  3. You have to create and link a content structure in the Content Server which corresponds to your local resource structure. The easiest way is to import your resources in the content repository as described in Section 6.4.2.2, “Import Changes into Repository and Link to Content” and link them afterwards to the site.

  4. In order to see the effect of your changes, you have to build your resources after each change. The easiest way is to use grunt watch. This will watch your Sass, Javascript and Freemarker source files and will recompile them after each change. See the README.md file in the corporate-theme module of the workspace for details.

When you have configured the preview, you will see the effect of changed web resources in the CAE in your local browser by navigating through the site that you have changed.

Preview in local Studio

When you have started a local CoreMedia Studio you can watch the changes more comfortably in the Studio preview, because, by default, CoreMedia Studio uses the CoreMedia CAE for preview which is installed on the same computer as Studio. The Studio preview offers the ability to explicitly search for elements and display them as preview without displaying the surrounding sites while still loading dependencies like CSS styles from web resources.

Preview without local Studio

When you do not want to build and start a local CoreMedia Studio, you can just copy and paste the preview URL of a non-local Studio to a new browser window/tab and change the hostname to your localhost. Therefore, you will see the preview as it would be in Studio.

Prev Up Next
 Home