Using Developer Mode with Themes

Do you want to develop Liferay DXP themes without having to redeploy to see your modifications? Use Liferay DXP’s Developer Mode! In Developer Mode, all caches are removed, so any changes you make are visible right away. Also, you don’t have to reboot the server as often in Developer Mode.

How does Developer Mode let you see your changes more quickly? By default, Liferay DXP is optimized for performance. Developer mode optimizes your configuration for development instead. Here is a list of Developer Mode’s key behavior changes and the Portal Property override settings that trigger them (if applicable):

• CSS files are loaded individually rather than being combined and loaded as a single CSS file (theme.css.fast.load=false).
• Layout template caching is disabled (layout.template.cache.enabled=false).
• The server does not launch a browser when starting (browser.launcher.url=).
• FreeMarker Templates for themes and web content are not cached, so changes are applied immediately (via the system setting in your Liferay DXP instance).
• Minification of CSS and JavaScript resources is disabled (minifier.enabled=false).

Note: There are two known issues LPS-71350 and LPS-70364 that prevent CSS changes from being applied to the page and the Control Panel and Product Menu to break when using Developer Mode. Both these issues are fixed in Liferay Portal CE 7.0.3 GA4 and Liferay DXP 7.0 Fixpack DE 13.

Individual file loading of your styling and behaviors, combined with disabled caching for layout and FreeMarker templates, lets you see your changes more quickly.

These developer settings are defined in the portal-developer.properties file. To use these settings, you can include them in your portal-ext.properties file or copy them over to your portal-ext.properties file and override specific properties as needed. These configurations are covered in this tutorial.

First, you can explore how it’s done in Developer Studio.

Setting Developer Mode for Your Server in Developer Studio

To enable Developer Mode for your server in Developer Studio, follow these steps:

1. Double-click on your server in the Servers window and open the Liferay Launch section.

2. Select Custom Launch Settings and check the Use developer mode option.

3. Save the changes and start your server.

Figure 1: The *Use developer mode* option lets you enable Developer Mode for your server in Developer Studio.

Warning: Only change the Server settings from the runtime environment’s Liferay Launch section.

For Liferay Portal servers below version 6.2 (e.g., Liferay v6.1 CE Server, Liferay v6.0 CE Server), Developer Studio enables Developer Mode by default. When starting your Liferay DXP server for the first time, it creates a portal-ext.properties file in your server’s directory. This properties file contains the property setting include-and-override=portal-developer.properties, which enables Developer Mode.

Most of the configuration is provided by the portal-developer.properties file, but you still have to configure the FreeMarker template setting. Follow the steps in the Configuring FreeMarker System Settings section to configure the FreeMarker template cache.

If you’re not using Developer Studio, manual configuration for Developer Mode is covered next.

Setting Developer Mode for Your Server Using portal-developer.properties

To set Developer Mode manually, you must point to portal-developer.properties as shown in the last section. Add the portal-ext.properties file to the root folder of your app server’s bundle and add the following line:

include-and-override=portal-developer.properties

Developer Mode is enabled upon starting your app server. portal-developer.properties provides the majority of the settings you’ll need for smooth development. To disable the cache for FreeMarker templates, you must update the System Setting covered in the next section.

Configuring FreeMarker System Settings

FreeMarker Templates for themes and web content are cached by default. Therefore, any changes you make to your FreeMarker theme templates aren’t immediately displayed. You can change this behavior through System Settings. Follow these steps:

1. Open the Control Panel and go to Configuration → System Settings.

2. Click the Foundation tab and select FreeMarker Engine.

3. By default, the Resource modification check (the time in milliseconds that the template is cached) is set to 60. Set this value to 0 to disable caching.

Your FreeMarker templates are ready for development. Next you can learn how you can improve JavaScript file loading for development.

JavaScript Fast Loading

By default, JavaScript fast loading is enabled in Developer Mode (javascript.fast.load=true). This loads the packed version of files listed in the Portal Properties javascript.barebone.files or javascript.everything.files. You can, however, disable JavaScript fast loading for easier debugging for development. Just set javascript.fast.load to false in your portal.properties, or you can disable fast loading by setting the URL parameter js_fast_load to 0.

Note: JavaScript fast loading is retrieved from one of three places: the request (determined by the current URL: http://localhost:8080/web/guest/home?js_fast_load=1(on) or ...?js_fast_load=0(off)), the Session, or the Portal Property (javascript.fast.load=true). Liferay DXP gives preference in the order of request, session, and then Portal Properties. This lets you change js_fast_load’s value from the default in portal.properties without having to manually re-enter js_fast_load into the URL upon every new page load.

Great! You’ve set up your Liferay DXP server for Developer Mode. Now, when you modify your theme’s file directly in your bundle, you can see your changes applied immediately on redeploying your theme!

Related Topics

Creating Layout Templates Manually

Creating Themes with Developer Studio