« Back to Blogs

Liferay 7/DXP Theme Development using Theme Generator

Liferay theme generator is the new way to create theme, layout in liferay 7 with the CLI support  rather using traditional way of creating theme using SDK in liferay 6.2. Theme Generator is also used to upgrade theme plugin. Liferay has leveraged number of new features and new front end libraries to advance theme development with the theme generator integration. There might be some hindrance for installing theme generator. But, after completing installation process, This is the most efficient, less time consuming and independent way to develop user interface and user experience components.

 

Consider below points to steer clear of the installation restraints :-

  1. Install all the packages under the directory having all the permissions.

  2. Select only latest stable version of dependent package to avoid version conflicts.

 

Install following required dependencies for theme creation:-

  1. Node js (recommended Long Term Support (LTS) )

  • Requirements :- To organize dependent packages.

  • Download and install node from the Nodes.js® web site.

 

  1. Yeoman

  • Requirements :- To generate theme structure.

  • Command to install : npm install -g yo

 

  1. Gulp

  • Requirements :- To run tasks such as build, clean, deploy and so on.

  • Command to install : npm install -g gulp

 

After installing above dependencies, Follow below steps to create theme.

 

1) Run below command to Install theme generator.

npm install -g generator-<generator_name>

e.g.  To create “liferay-theme” generator : npm install -g generator-liferay-theme

 

2) Go to the directory where theme needs to be created and run below command to create theme by running theme generator.

yo <generator_name>

 

3) Follow the instructions provided by theme generator

a) Enter a name for your theme :- (e.g., Test Theme)

b) Enter a theme ID (e.g., tester-theme), or press enter to accept the default.

c) Select the version of your Liferay instance (e.g, 7.0).

Following user customizable files will be created under theme structure :-

  • package.json
  • .gitignore
  • gulpfile.js
  • src\WEB-INF\liferay-look-and-feel.xml
  • src\WEB-INF\liferay-plugin-package.properties
  • src\css\_custom.scss

 

d) Enter the path to your app server directory : e.g., E:\theme-generator\liferay-server-7.0\tomcat-8.0.32

e) Enter your deploy directory path : e.g., E:\theme-generator\liferay-server-7.0\deploy

f) Enter the url to your production or development site : e.g., http://localhost:8080 for local development server.

(The information related to app server can be configured in liferay-theme.json file in root directory of created theme.)

 

Note :- You may go through installation process for required dependencies during this steps.

 

Important : - By default, Liferay theme uses node-sass which in turn, needs node-gyp, python and  visual studio as large dependencies. This task is ,of course, will get lots of effort to work. So, we recommend to install ruby-sass and compass which reduce hurdles and increase development efficiency.

To build and deploy theme, we need to install below dependencies :-

  1. Ruby

  • Requirements :- To manage sass and compass dependencies

  • Download and Install : Ruby installer

 

  1. Sass

  • Requirements :- Syntax engine to write css using mixins, variable, nested syntax efficiently.

  • Command to install : gem install sass


  1. Compass

  • Requirements :- Syntax compiler to create beauty of css by converting sass syntax to css.

  • Command to install : gem install compass

 

To use ruby sass and compass as build and deploy tool, follow below steps :-

 

  1. Locate package.json file in root directory of created theme and change property rubysass value from false to true.


  1. Go to theme directory in console and run below command to acknowledge node package manager for using ruby sass and compass as build tool for your theme.

 

npm  i --save gulp-ruby-sass


  1. Follow the build and deploy commands to build theme package and deploy to app server.

 

gulp build

 

 

gulp deploy

 

For more implementation details or support, you may contact us at enquiry@surekhatech.com.

Comments
No comments yet. Be the first.
contact-us Request a callback