Difference between revisions of "Web Administration Dashboard - Developer's Guide"

From RifidiWiki

Jump to: navigation, search
(Configuring environment)
(Configuring environment)
Line 54: Line 54:
 
# [https://www.jetbrains.com/webstorm/ Download] an appropriate license of WebStorm, or use another JavaScript IDE
 
# [https://www.jetbrains.com/webstorm/ Download] an appropriate license of WebStorm, or use another JavaScript IDE
 
# Open the project source code in IDE.<br>[[Image:open_webproject.png]]
 
# Open the project source code in IDE.<br>[[Image:open_webproject.png]]
 +
<br>
 
# Inside Gruntfile.js project file, set the appropriate port number for nodejs development server to run<br>[[File:devportsetting_webproject.png]]
 
# Inside Gruntfile.js project file, set the appropriate port number for nodejs development server to run<br>[[File:devportsetting_webproject.png]]
 +
<br>
 
# Open an operating system command console and locate the root of web app source code, where the Gruntfile.js file is located.<br>[[Image:opencommandconsole_webproject.png]]
 
# Open an operating system command console and locate the root of web app source code, where the Gruntfile.js file is located.<br>[[Image:opencommandconsole_webproject.png]]
 +
<br>

Revision as of 17:23, 25 April 2015

Note: Use Edge developer setup as a reference - http://wiki.rifidi.net/index.php?title=Edge_Server_Development_Environment
This document details the steps necessary to set up a development environment in order to modify Web Administration Dashboard.

Development tools

In developing this responsive html5 web application, we leverage on these technologies:

Npm

A package manager for javascript
To install it, go to https://www.npmjs.com/package/npm

Yeoman

The web's scaffolding tool for modern web applications
To install it, go to http://yeoman.io/

Node JS

A platform built on Chrome's JavaScript runtime for building network applications
To install it, go to https://nodejs.org/

Grunt

A JavaScript task runner
To install it, go to http://gruntjs.com/

Bower

A package manager for the web
To install it, go to http://bower.io/

Bootstrap

HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
Documentation available on web site http://getbootstrap.com/

Angular JS

HTML enhanced for web apps
Documentation available on web site https://angularjs.org/

Angular Modules

Find modules for AngularJS
Modules available on web site http://ngmodules.org/

Angular UI

Companion suite(s) to the AngularJS framework
Modules available on web site https://angular-ui.github.io/

WebStorm

A lightweight IDE for client-side development and server-side development with Node.js
Product available on web site, according to appropriate license https://www.jetbrains.com/webstorm/

Configuring environment

  1. Setup Edge Server Development Environment, as source code for web administration dashboard is located in folder Rifidi-SDK / RifidiHome / admin
  2. Download and install Npm
  3. Download and install Yeoman
  4. Download and install NodeJS
  5. Download and install Grunt
  6. Download and install Bower
  7. Download an appropriate license of WebStorm, or use another JavaScript IDE
  8. Open the project source code in IDE.
    Open webproject.png


  1. Inside Gruntfile.js project file, set the appropriate port number for nodejs development server to run
    Devportsetting webproject.png


  1. Open an operating system command console and locate the root of web app source code, where the Gruntfile.js file is located.
    Opencommandconsole webproject.png


Personal tools