kashti-angular5.md

Kashti / Angular 5 development guide

Clone Repo + build dependencies

$ git clone [email protected]:Azure/kashti.git
$ cd kashti

Create new branch based on angular5 branch

$ git checkout angular5
$ git checkout -b your-branch-name

Install dependencies and run the app with these commands.

$ yarn                              # install project dependencies
$ ng serve                          # start a local server in development mode
$ ng serve --environment prod       # start a local server in production mode (minification, uglification, etc.)
$ ng lint                           # run linters 
$ ng test                           # run unit tests in Chrome

Project layout:

CSS/SCSS

• Global SCSS/CSS: src/styles.scss
• Per component SCSS/CSS: src/app/my-component-name/my-component-name.scss

HTML

• Global index.html: src/index.html: generally you want to edit HTML for components directly, not work in here
• index.html in turn calls component HTML/CSS based on URL hit in the app, e.g. /dashboard, /styleguide, etc.
• Per component HTML: src/app/my-component-name/my-component-name.html

Assets (images, fonts, etc)

• Place assets under src/assets, e.g. src/assets/images
• Refer assets from HTML/CSS with path, e.g. assets/images/microsoft.png

Styleguide/scratch pad

• HTML/CSS scratchpad for foundation widgets.
• Located in src/app/style-guide/
• Go to http://localhost:4200/styleguide

Build/test loop/commit/pull request

• First thing is to run ng serve to launch the kashti app running on http://localhost:4200.
• Any changes to typescript/html/css will automatically trigger a refresh with latest version in the browser
• When happy, commit that code!
• Push your branch often!
• When you're ready to merge into the angular5 branch, open a pull request from your branch into angular5

Need to install a new dependency?

• yarn add <npm package> to add to app dependencies (bundled in javascript shipped to users)
• yarn add -D <npm package> to add to development dependencies (examples: testing libraries)

I had to do a couple of baseline steps before getting the yarn install step to work:

brew install yarn
npm install -g @angular/cli
yarn

Possibly just local issues with an ancient macbook though.