Monday, 14 August 2017

How to customize DXA theme - Step 1 Launch default HTML design

DXA is build using responsive design HTML5 and Bootstrap.It gives us the flexibility to change the design as per requirement.

Let's start with spinning the already existing HTML-design but before that, we need to install prerequisites.

  1. Install Node.js
  2. Instsll npm,grunt and bower.
    • npm install -g npm@3
    • npm install -g grunt-cli
    • npm install -g bower.
Install npm

Install Gurnt-cli
Install Bower


Once you have done with installations run below command to check node and npm version.

I already have the latest version of Node.js and npm install on my machine.Now let's build the assets we need to copy the content of .\html\desgin from the installation media to any location and run the 
  1. npm install
  2. brower install 
  3. grunt build
What this will do, this will build all the assets and can found in the ./dist folder.

Let's run the site locally and for that we need to run grunt command.
grunt serve

Grunt serve
A web server will be started at http://localhost:9000.

Whitelabel HTML Design
For next step on how to edit HTML, create HTML-Design package and update CMS.

Happy coding and keep sharing!!!                                                                                       


No comments:

Post a Comment