Import and Upgrade of Liferay-6.2.0 Theme to Liferay-7.1.0 using NPM, Yeoman and Gulp in Ubuntu

In this post, we are going to discuss how to import and upgrade liferay-6.2.0 portal themes to liferay-7.1.0 themes.

Follow the instructions carefully to have a successful import and upgrade....

Before we Import and Upgrade, there are pre-requisites has to be met, make sure you have following tools available in your local environment.

Prerequisites
Name	Version	Download Page	Direct Link
Node	11.15.0	Node Package Manager Download Page	Click to Download Directly

You can use the following links to install Node Package Manager, Yeoman and Gulp.

Installation of Node Package Manager

The node package manager version given in the pre-requisite secition is different than the one that is mentioned in the link, but the installation procedure remains the same

Node Package Manager Installation

Installation of Yeoman and Gulp

Yeoman and Gulp Installation

Import and Upgrade of Liferay 6.2.0 Theme

Import of liferay-theme is a straight forward approach, but the way I want to discuss here is slightly different than the one what has been said in other tutorials or articles. I am not going to refer 6.2.0 theme directly instead I make a copy of it in a separate workspace and then import the same...

To have this done, follow the instructions carefully....

Open a terminal and navigate to one of your favourite locations and create folders to hold the components of the theme...

> mkdir hello-world-theme

> mkdir -p hello-world-theme/docroot

> mkdir -p hello-world-theme/docroot/_diffs

> mkdir -p hello-world-theme/docroot/WEB-INF

Now create the following files as mentioned....

> touch hello-world-theme/build.xml

> touch hello-world-theme/docroot/WEB-INF/liferay-look-and-feel.xml

> touch hello-world-theme/docroot/WEB-INF/liferay-plugin-package.properties

Updating build.xml file

Copy and Paste the content given below in build.xml file.

<?xml version="1.0"?>
<!DOCTYPE project>

<project name="hello-world-theme" basedir="." default="deploy">
<import file="../build-common-theme.xml" />

<property name="theme.parent" value="_styled" />
</project>

Updating liferay-look-and-feel.xml

Copy and Paste the below contents to liferay-look-and-feel.xml file and save it.

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_2_0.dtd">

<look-and-feel>
<compatibility>
<version>6.2.1+</version>
</compatibility>
<theme id="hello-world-theme" name="hello-world-theme">
<template-extension>ftl</template-extension>
<color-scheme id="01" name="Green">
<css-class>theme_green</css-class>
<color-scheme-images-path>${images-path}/color_schemes/green</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Orange">
<css-class>theme_orange</css-class>
<color-scheme-images-path>${images-path}/color_schemes/orange</color-scheme-images-path>
</color-scheme>
</theme>
</look-and-feel>

Updating liferay-plugin-package.properties file

Copy and Paste the following content in liferay-plugin-package.properties file and save it.

name=hello-world-theme
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
long-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.2.0+

#required-deployment-contexts=\
#    resources-importer-web

resources-importer-developer-mode-enabled=true

Now Copy and Paste the folders available in _diffs folder of the original 6.2.0 theme folder to the _diffs of hello-world-theme/docroot/_diffs

We are almost at the end of making things right...

Importing 6.2.0 Theme

Now everything is set to import the theme from 6.2.0 to 7.1.0

Run the command below to import the theme..

> yo liferay-theme:import

The above command would ask you to provide the absolute path of the theme folder, provide the one we have just created in previous steps...

You can refer the same in the image given below... in case you need it.

The console looks the one below when you provide the absolute path of the theme's root folder.

Press enter to execute the import.

At the end of the command execution, the console window ask you to provide the absolute path to the local application server, please provide the one which you have installed in your local machine.

In my case, I have given the Tomcat Application Server associated with the liferay portal, the image below would detail it in a comprehensive manner...

Once the theme is imported successfully we will have the directory called hello-world-theme in our workspace.

> cd hello-world-theme

> ls

Use the above command to check it out, you should see something like the one given in the image below..

This concludes the import of liferay 6.2.0 theme.

Theme Upgrade from 6.2.0 to 7.1.0

Now we have successfully imported the theme, the next step is to upgrade it to 7.1.0.

To upgrade the 6.2.0 theme to 7.1.0, use the following command

> gulp upgrade

The execution of the above command is depicted in pictures given below...the images are self explanatory.

This upgrade process converts the components from 6.2.0 to 7.1.0 to its best, but there would be certain errors which has to be fixed manually.

Correcting errors manually is a daunting task but ..... "Patience is a virtue".

This concludes the upgrade of liferay 6.2.0 themes to 7.1.0

Thanks.