Building and testing az idatepicker

This page describes how to set up your development environment to build and test az-idatepicker. It also explains the basic mechanics of using git, node, and npm.

• Prerequisite Software
• Getting the Sources
• Installing SASS
• Installing NPM Modules
• Preparing development files
• Building

Prerequisite Software

Before you can build and test az-idatepicker, you must install and configure the following products on your development machine:

• Git and/or the GitHub app (for Mac or Windows); GitHub's Guide to Installing Git is a good source of information.

• Node.js, (version 7.5.0) which is used to run a development web server and generate distributable files. We also use Node's Package Manager, npm (version 4.2.0), which comes with Node. Depending on your system, you can install Node either from source or as a pre-packaged bundle.

• Ruby, (version 2.0.x) which is used to compile sass file (yes, we are using sass as our css pre-processor). We also use Ruby's Package Manager, gem (version 2.6.11), to install the sass library and it's dependency.

Getting the Sources

Fork and clone our repository:

1. Login to your GitHub account or create one by following the instructions given here.
2. Fork the main az-idatepicker repository.
3. Clone your fork of the az-idatepicker repository and define an upstream remote pointing back to the our repository that you forked in the first place.

# Clone our GitHub repository:
git clone git@github.com:<github username>/doenikoe/az-idatepicker.git
`or`
git clone https://github.com/doenikoe/az-idatepicker.git

# Go to the az-idatepicker directory:
cd az-idatepicker

# Add the main az-idatepicker repository as an upstream remote to your repository:
git remote add upstream https://github.com/doenikoe/az-idatepicker.git

Installing SASS

# install sass css pre-processor
gem install sass

# install bourbon
gem install bourbon

# install bourbon mixin files 
cd src/ && bourbon install

Installing NPM Modules

run the script bellow at the top of your project directory (where the package.json file's located)

# Install az-idatepicker project dependencies (package.json)
npm install

Preparing Development Files

after all task above completed, your project's directory structure should be like this:

az-idatepicker
|---src
|   |   bourbon
|   |   ... 
|   |   component
|   |   .... 
|   |   directive
|   |   ... 
|   |   idatepicker.module.ts
|   |   vendor.ts

|   CHANGELOG.md
|   index.d.ts
|   LICENSE
|   package.json
|   screenshot.png
|   tsconfig.json
|   .gitignore
|   node_modules
|---....

Download all development files required

Download it from devel-files branch or click here to get the latest zip file containing all necessary development files. After you extract the zip, put all file/folder into root project directory so that your project directory structure now should be like this:

|---src
|   |---app
|   |   |---component
|   |   |   |   app.component.ts
|   |   |   app.module.ts
|   |   |   index.html  
|   |   bourbon
|   |   ... 
|   |   component
|   |   .... 
|   |   directive
|   |   ... 
|   |   idatepicker.module.ts
|   |   vendor.ts
|   |   main.ts
|   |   polyfills.ts
|   CHANGELOG.md
|   index.d.ts
|   LICENSE
|   package.json
|   screenshot.png
|   tsconfig.json
|   .gitignore
|   node_modules
|---....

Building

Run the following command to build az-idatepicker (all builded resources will be placed inside directory dist_dev)

npm run-script dev