close

Filter

loading table of contents...

Frontend Developer Manual / Version 2307

Table Of Contents

3.2 Using a Local CAE

CoreMedia Blueprint supports local resources as a simple yet powerful way for developers to work with workspace resources, rather than code objects in the content repository.

Content Application Engine flow in detail

Figure 3.3. Content Application Engine flow in detail


Figure 3.3, “Content Application Engine flow in detail” gives an overview of the idea behind local resources.

  1. The browser requests a page from the locally started Content Application Engine.

  2. The CAE requests the content from the Content Server.

  3. While in development mode, the Content Server delivers content such as Articles and content items which link to the web resources.

    In live mode, the Content Server also delivers the web resources to the CAE.

  4. The CAE has got the editorial content which links to the web resources. Now, the CAE resolves the local location of the web resources and requests the resources from the file system.

  5. The CAE reads the resources from the file system.

  6. The CAE combines the content from the Content Server and the web resources from the file system and delivers the requested page to the browser.

Preparing the Preview

Immediate preview of your changes requires a local preview CAE 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. If you're using the Frontend Workspace, all paths are preconfigured and work out of the box.

  2. To start the local Spring Boot application in development mode, use the following command in module cae-preview-app

    mvn spring-boot:run -Pdev,local -Dinstallation.host=<YourCMS>
            
    1. The Maven setting delivery.local-resources of the preview CAE must be "true" in order to use local resources. This is the default setting.

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

    Open your browser at http://localhost:40980/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 5.6, “Importing Themes into the Repository” 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 pnpm start --local. This will watch your Sass, JavaScript and FreeMarker source files and will recompile them after each change.

    Change the developer workflow to "local" in config/env.json, since "remote" is the default, if you want to use pnpm start instead of pnpm start --local.

    {
      "monitor": {
        "target": "local"
      }
    }
Editing Source Files

In general, editing a theme is a straightforward development task as soon as you have set up the preview. When you edit CSS files, Sass files or JavaScript files, add images and, maybe, write FreeMarker templates you will immediately see all changes in your preview CAE.

All CoreMedia themes provide a start script, which starts the monitor mode. This also includes live reloading to automatically reloading your changed files.

However, before you can start editing a theme, you need a theme. You can either edit an existing theme, or create a new theme. Creating a new theme requires additional work, because before you can see the preview, you need to create a new module, do an initial upload of your theme to the Content Server and link it to a site.

Note

Note

Renaming or adding of templates will work smoothly, but deleting a template will not work without clearing the cache. Empty the cache or restart the CAE to see the affected changes.

Monitoring Changes

The monitor mode may be run by executing pnpm start from your theme directory. The command watches file changes and updates the theme on the local CAE.

A live reload mode to automatically refresh the browser on file changes is included.

Note

Note

The file system listeners that automatically rebuild the theme when a file is changed are only active after the initial build has finished. This means that if you change any files during the initial build it will not cause the changes to be detected. Better wait for the console output stating "Webpack is watching the files..." before performing any further changes after starting the monitor mode.

The monitor mode may be configured in an env.json file in the config directory of the Frontend Workspace using the options listed below. All CoreMedia Themes are preconfigured and work out of the box.

Option Type Default Description
target String remote

Set this option to local in order to configure the monitor mode for a local preview Content Application Engine.

livereload.host String localhost

This defines the host of the live reload server.

livereload.port Number 35729

This defines the port the live reload server listens on.

Table 3.4.  Options to configure the monitor mode


Example
{
  "monitor": {
    "target": "local",
    "livereload": {
      "host": "localhost",
      "port": 35729
    }
  }
}

To quit a running monitor mode, press the keys<Ctrl>+<C>

Studio Preview

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

When you have started a local CoreMedia Studio you can watch the changes more comfortably in the Studio preview, because, by default, Studio uses the Content Application Engine 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.

When you do not want to build and start a local 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.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.