Step by Step Guide to Create Theme for Liferay DXP 7

We have been working with Liferay platform ever since the release of Liferay 3.6 for developing enterprise web applications and over this time , not only we have seen the platform evolve and grow significantly with each release, it has also been recognized as a leader in the “Magic Quadrant for Horizontal Portals”– an yearly publication from Gartner ( A leading IT research firm), for the fifth year in a row.

With introduction of Liferay Digital Experience Platform (DXP) 7, creation of custom themes became a complex process, compared to Liferay 6.2 where themes can be easily created using Liferay developer studio and Eclipse.

Therefore in this blog, we have provided a step by step guide for creating your own custom theme for Liferay 7.0.
Mainly 3 steps are included:

• Prerequisite (i.e. environment) to start theme development
• Steps to build theme.
• Deploy theme

Setup of Liferay Theme

Theme generator has few inline dependencies. To make theme generator work, you need to follow following steps to resolve its dependencies.

• Uninstall latest version of node & Ruby and Rails if installed
• Install Node v4.2.2 via the link – https://nodejs.org/download/release/v4.2.2/node-v4.2.2-x64.msi
• Open the Command Prompt and Check the node version,
  => Type command –

  node –v

  and check for output – v4.2.2

• Setup NPM environment by following below steps:

=> Open it in Command Prompt (CMD)

=> Go to C:\Users\ {current User} for Example: C:\Users\dharam.mali
=> Type

copy NUL .npmrc

=> You can see-> .npmrc file is created at C:\Users\dharam.mali
=> Open .npmrc file and add following path:
prefix=c:\Users\dharam.mali\.npm-packages

•     Set environment variables for Node and NPM as follows:
  => NPM_PACKAGES (Add new System Variable) = C:\Users\ dharam.mali\.npm-packages
  =>  NODE_PATH (Add new System Variable) = %NODE_PATH%;c:\Users\dharam.mali\.npm-packages\node_modules
  => Add to (user variable) PATH = %NPM_PACKAGES%
•      Close the Command Prompt (CMD) and open again with Administrator, now Install Yeoman and gulp globally by executing the following command

  npm install -g yo gulp

  (It will take some time)

• Now you’re ready to install the Themes Generator. Install it by executing this command:

  npm install -g generator-liferay-theme

Once everything is installed without error, then install Sass on Windows. Install Ruby Sass and Compass by below steps

• Download Ruby from: http://rubyinstaller.org/downloads/
  => Use the latest version: Ruby 2.3.1 (x64)

Installation:
a. Install it in Program file
b. Make sure to tick
i. “Add Ruby executable to you PATH
ii. Associate .rb and……

iii. Open CMD with administrator, type

gem -v

output: 2.5.1

• Now install SASS Compiler for CSS
  a. To avoid error we will change source path for Ruby,
  => Open CMD with administrator, type:

  gem sources -a http://rubygems.org/

  b. Install

  gem install sass compass

Everything is installed properly, now it’s time to create theme!

• Go to directory when you want to create your theme: (for Example: E:\projects\liferay-developer-studio\workspace\liferay-workspace\themes)
  
  a. Open CMD with Administrator,
  type :

  yo liferay-theme

Create New Theme name ”MyFirstTheme”

         b. Now your theme is created, see folder created named “MyFirstTheme”
         c. Go to your theme folder E:\projects\liferay-developer-studio\workspace\liferay-workspace\themes\myfirsttheme-theme
        d. In CMD type:

npm install

Now, to deploy theme in Liferay, follow the simple steps given below:

• Go to your theme folder in cmd, e.g. E:\projects\liferay-developer-studio\workspace\liferay-workspace\themes\myfirsttheme-theme
• Type :

  gulp build

• Once you get message “Finished ‘build’ after 17 s” type:

  gulp deploy

Now your theme is ready for use.

Wrap-Up

In this Blog, we have provided step by step Installation guide and error free solution for developers which helps in time efficient and user friendly installation of theme in Liferay 7.