# generator-waab

> Generator for angular 2 applications, powered by webpack bundler. Includes configs for different developing environments and for running unit tests

Latest version **0.4.1** (published 2017-07-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install generator-waab
pnpm add generator-waab
yarn add generator-waab
bun add generator-waab
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2017-07-03 |
| First published | 2017-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | sedletskyi@mlsdev.com |
| Maintainers | andrew_mls |
| Keywords | yeoman-generator, generator-waab, app generator, angular 2, angular app, webpack-builder, webpack |

## Links

- npm: https://www.npmjs.com/package/generator-waab
- Repository: https://github.com/mlsdev/generator-waab
- Homepage: https://github.com/mlsdev/generator-waab#readme
- Issues: https://github.com/mlsdev/generator-waab/issues
- npm.io page: https://npm.io/package/generator-waab

## Dependencies (5)

- [chalk](https://npm.io/package/chalk.md) ^1.1.3
- [yosay](https://npm.io/package/yosay.md) ^2.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [yeoman-generator](https://npm.io/package/yeoman-generator.md) ^1.1.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2017-07-03
- 0.4.0 — 2017-06-23
- 0.3.0 — 2017-06-02
- 0.2.1 — 2017-05-26
- 0.2.0 — 2017-05-26
- 0.1.0 — 2017-03-29

## README

# generator-waab

### Webpack Angular Application Builder
[![Build Status](https://travis-ci.org/MLSDev/generator-waab.svg?branch=master)](https://travis-ci.org/MLSDev/generator-waab)

> Angular 2 application generator based on webpack bundling system
 
## Features

* Basic angular 2 dependencies  
* Basic dependencies for unit testing (only jasmine for now)
* Support develop environment configurations
* Compilation of [Pug](https://pugjs.org), [Stylus](https://learnboost.github.io/stylus/), [Typescript](https://www.typescriptlang.org/)
* Linting Typescript with [TSLint](https://palantir.github.io/tslint/) based on rules from [codelyzer](https://github.com/mgechev/codelyzer)
* Running unit tests with [Karma](https://karma-runner.github.io/1.0/index.html)
* Images optimization using [imagemin-webpack](https://github.com/itgalaxy/imagemin-webpack) based on [imagemin](https://github.com/imagemin/imagemin)

## Quick start
Make sure you have Node version >= 6.1 and NPM >= 4.1

```
# install yeoman globally
npm install -g yo

# install generator globally
npm install -g generator-waab

# move to app folder
cd /my-app

# run generator
yo waab
```

Now the project is created. You can start developing

### How to update generator

Installing generator again will update it to the newest version.

```
# install generator globally again
npm install -g generator-waab

# run generator to update files it in your app
yo waab
```

### Install options

You can select files, which you want to add with generator.

Here is a list of files for each option, which you can see on `Select files, which you want to generate` step

```
#App constants
 - folder: configs/constants
 
#Builder configs
 - folder: configs/builder
 - folder: configs/test
 - file: configs/base.js
 - files in app root: 
    - global-typings.d.ts
    - karma.conf.js
    - tsconfig.json
    - tsconfig.webpack.json
    - webpack.config.js
    
#App src files
 - folder: src
 
#Basic app files
 - files in app root:
    - package.json
    - .gitignore
    - README.md
    - CHANGELOG.md
    
#Create assets folders
 - create folders:
    - src/app/vendor
    - src/public
    - src/public/favicon
    - src/public/fonts
    - src/public/images
    - src/public/locales
    - src/styles/vendor
```

### App structure
 App structure is based on component approach, proposed in [Angular Style Guide](https://angular.io/docs/ts/latest/guide/style-guide.html#!#application-structure-and-angular-modules).
 
 ```
 application-root/
  ├──config/                        * bundler and test configurations
  |   ├──constants/                 * constants for application used in index.html template and in scripts
  |   │   └──<env>.js               * config files for different environments
  |   ├──builder/                   * webpack bundler configs
  |   │   ├──styles-loader/         * exported configurable style loaders
  |   │   └──<env>.js               * <env> configs for webpack
  |   ├──test/                      * configs running unit tests with karma
  |   └──base.js                    * common webpack configs
  │
  ├──src/                           * source files for the application
  |   ├──app/                       * web app folder
  │   │   └──polyfills.ts           * polyfills file
  │   │
  |   ├──meta/                      * folder containing files for SEO 
  |   ├──public/                    * all public files folder (fonts, images, favicons, translations) 
  |   ├──styles/                    * common styles for application 
  │   │  
  |   ├──index.html                 * index page template 
  |   └──index.ts                   * root script file 
  │
  ├──global-typings.d.ts            * types definitions for global variables inserted by DefinePlugin 
  ├──karma.conf.js                  * karma root configuration file
  ├──package.json
  ├──tsconfig.json                  * typescript config used outside webpack
  ├──tsconfig.webpack.json          * config that webpack uses for typescript
  ├──tslint.json                    * typescript lint config
  └──webpack.config.js              * webpack root configuration file
```

### Development
 Before starting development install npm packages (if you declined automatic installation).
 Running compile/build/test tasks are based on **npm scripts** from `package.json`
 
```
# developing locally
npm run start:local

# running build for develop environment
npm run start:dev

# running build for staging environment
npm run start:staging

# running build for production environment
npm run start:prod
```

### Using variables in `stylus`

Use file `variables.styl` in `src/styles` for storing stylus variables and mixins. It should be imported only in `main.styl`. In component styles it's imported in loader configs.   

### Including styles from `node_modules`

Just import it in `index.ts`. Use absolute path:

`import "module_name_from_node_modules/path_to_styles/styles.css"`

### Images in styles and templates

Loaders will move images from `src/public` folder to `dist/public` and change path in files, where image is included.

For correct images loading, use relative path, from file where image is included.

Examples:
* Including images in stylesheets: `background: url(../../public/images/logo.png)`
* Including images in pug templates: `img(src=require('../../public/images/logo.png))`

### APP constants

Configuration constants which are available in app:
* `ENV` - environment variable (string)
* `APP_CONST` - application constants (object)

`ENV` - is set from npm scripts

`APP_CONST` - this object is a copy of `appConstants` object in environment config file `configs/app/*.js`

Usage example:

```
class YourClass {
  someMethod() {
    console.log(ENV);
    console.log(APP_CONST);
    console.log(APP_CONST['api']);
  }
}
```

 In config file `configs/constants/*.js`, `template` object holds configuration constants for template `index.html`. For example, to output `basePath` parameter just write`<%= htmlWebpackPlugin.options.constants.basePath %>` in template.      

#### Build Features
 * `dist` - destination folder for compiled builds
 * `src/app` - all application files should be located here (except static files and global styles)
 * `src/app/vendor` - vendor custom libraries and scripts should be located here
 * `src/styles/vendor` - vendor css files (like bootstrap themes) should be located here
 * files from `vendor` folders (styles and scripts) will be exported to separate file
 * when running `staging` and `production` builds, all files will have their unique `chunkid` for better performance 
 * `webpack-dev-server` is used for local developing
  
### Unit testing 
All unit tests should be located in the same folder with tested component, and should have `spec` separated by dots in filename (Example: `app.component.spec.ts`). For now [Jasmine](https://jasmine.github.io/) is the only test framework used.
   
```
# running tests while developing
npm run test:dev

# single tests run
npm run test

# single tests run with code coverage output
npm run test:coverage
```

## License
[The MIT License](./LICENSE)

## About MLSDev

[![alt text](./mlsdev-logo.png "MLSDev.com")][mlsdev]

Development Standards are maintained by MLSDev, Inc. We specialize in providing all-in-one solution in mobile and web development. Our team follows Lean principles and works according to agile methodologies to deliver the best results reducing the budget for development and its timeline. 

Find out more [here][mlsdev] and don't hesitate to [contact us][contact]!

[mlsdev]: http://mlsdev.com
[contact]: http://mlsdev.com/contact_us

---
_Source: https://npm.io/package/generator-waab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._