Generator-ng2-alfresco-component NPM

Introduction

See the following page for an introduction to the Alfresco Application Development Framework.

Prerequisites

Before you start using this development framework and the generator, make sure you have installed all required software and done all the necessary configuration, see this page.

Installing Yeoman and the Component Generator

First, install Yeoman:

npm install -g yo

Then the Alfresco Component Generator:

npm install -g generator-ng2-alfresco-component

Generating a new component project

First, move into the folder where you want create your component.

yo ng2-alfresco-component

alfresco generator

Which will generate project structure similar to the following:

├── assets/
│   └── license_header.txt
├── demo/
│   ├── src/
│   │   └── main.ts
│   ├── .editorconfig
│   ├── .gitignore
│   ├── index.html
│   ├── package.json
│   ├── README.md
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── tslint.json
│   └── typings.json
├── src/
│   ├── my-element.component.spec.ts
│   └── my-element.component.ts
├── .editorconfig
├── .gitignore
├── gulpfile.ts
├── index.ts
├── karma-test-shim.js
├── karma.conf.js
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
├── tslint.json
└── typings.json

You will need to run the following scripts in the generated folder:

npm install
npm run build

Alternatively you can use generator with install switch to trigger automatic installation of dependencies via npm install script:

yo ng2-alfresco-component --install

Optinally you can use npm run link script to locally link ADF libraries if necessary.

npm scripts

Command	Description
npm run build	compiles component
npm run build:w	compiles component, watches for changes and recompiles if needed
npm run test	compiles, runs and watches the karma unit tests (console version)
npm run test-browser	compiles, runs and watches the karma unit tests (browser version)
num run coverage	runs unit tests, generates and opens code coverage report in browser
npm run link	Link ADF components locally by means of `npm link`
npm run build.umd	Build the UMD bundle package

Running demo

If you have answered Yes for the generator question Do you want a demo project to be generated? you will get an additional demo project in the demo folder.

You will need installing npm dependencies for the generated demo project separately:

cd demonpm run test
npm install
npm run start

Optinally you can use npm run link script to locally link ADF libraries if necessary.

Contributing to the generator

Fork it!
Create your feature branch: git checkout -b my-new-feature
Make some changes
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request

To contribute to the existing code base add test cases to cover the new behaviour, and make sure all the existing tests are still green.

To test the generator run:

npm run test

Debugging generator

# OS X / Linux
DEBUG=yeoman:generator yo ng2-alfresco-component

# Windows
set DEBUG=yeoman:generator & yo ng2-alfresco-component

Advanced options

yo ng2-alfresco-component --alfresco

Typically used for internal purposes and adds the following extras to the generated project structure:

adds Alfresco license headers to all code files
configures component package.json with additional license checker configurations (devDependencies, scripts, etc.)