Okay
  Print


Installing

To deploy the theme simply put the files into your webserver (ex : www.example.com) and navigate to it through the browser

Chaanging and deploying

The theme comes with grunt.js integration and bower so in order to have an optimised installation the recommended way is buy performing the grunt and bower tasks described bellow.

Development

For development purposed javascript files and css files will not be compressed in order to be able to debug and find easily where any issue is.

Testing

The theme contains a test grunt task using jshint to go trough the code and find possible issues with the code.

Production / Minified 

Minified task compresses css files, js files, compiles html templates in to javascript all in order to fully optimize the final application and make it as fast and reliable as possible.

Compiling the theme

To perform the grunt tasks you will need the following things installed in either your local maching (recommended) or on the webserver, depending where you are performing the tasks. For more information on grunt follow this link : http://gruntjs.com/

1 ) Install node.js on your maching. It provides also installations for all other platforms : http://nodejs.org/download/

On Ubuntu running the sudo apt-get install nodejs might run into problems as the version available in the package manager is not supported. For more info check : http://stackoverflow.com/questions/12913141/installing-from-npm-fails

2 ) Before setting up Grunt ensure that your npm is installed and up-to-date by running npm update -g npm (this might require sudo on certain systems). To install on linux you can run : sudo apt-get install npm

2 ) Install grunt Command line interface (CLI) by following : http://gruntjs.com/getting-started

3 ) make sure all packages are installed by running in your application root folder the following : sudo npm install

4 ) Enable all dependencies by running : bower install

5 ) Run the task you want :

  • grunt dev (grunt --force dev for forcing erros to pass)
  • grunt test (grunt --force test for forcing erros to pass)
  • grunt minified (grunt --force minified for forcing erros to pass)
  • grunt copy-icons (grunt --force minified for forcing erros to pass). 

This will compile  the scripts in the application (app, controllers, directives, services, all extra scripts like all the charting libraries etc) and put them into one single js file and one single css file inside the destination folder in this case "dist".

After that simply push your root files and the dist folder into the webserver and you are done! You have a full compressed and optimized site running.

Files contained in the compressed application : 

  • index.html
  • app
  • dist
Problem while copying files

When copying the icons you might run into an issue where grunt is trying to open too many files (its a lot of images). You can run the command to Increase file limit size : ulimit -n 10240. Alternatively you can also copy the icons folder manually from the folder bower_components/material-design-icons. Make sure to copy all svg files into the same folder dist/img/icons

package.json - Development dependencies

In the file package.json are included the development dependencies, namely all the grunt modules to be able to run grunt to compile the theme. To instal the dependencies run npm install and this will install all the dependencies. 

To install a new dependency and save the dependency run the following command :

  • npm install npm_module --save-dev

Bower.json - External dependencies

All dependenies are listed in the bower.json file. When running bower install all dependencies like jquery, angular, chartjs etc will be installed in the folder bower_components.

Notes : 

When asked to choose jquery version choose version 2.1.4.

To include new dependencies run the following command to both install and save the dependency : 

  • bower install package_name --save