Frontend Developer Manual / Version 2201
Table Of ContentsCoreMedia 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.
Figure 3.3, “Content Application Engine flow in detail” gives an overview of the idea behind local resources.
The browser requests a page from the locally started Content Application Engine.
The CAE requests the content from the Content Server.
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.
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.
The CAE reads the resources from the file system.
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:
If you're using the Frontend Workspace, all paths are preconfigured and work out of the box.
To start the local Spring Boot application in development mode, use the following command in module
cae-preview-appmvn spring-boot:run -Pdev,local -Dinstallation.host=<YourCMS>The Maven setting
delivery.local-resourcesof the preview CAE must be "true" in order to use local resources. This is the default setting.The Maven setting
delivery.developer-modeof 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>.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.
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 usepnpm startinstead ofpnpm 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
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
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 |
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.
