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

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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Make some changes
4. Commit your changes: git commit -m 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. 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

More on debugging generators.

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.)

History

For detailed changelog, see Releases.

Contributors

| Contributor | GitHub profile | Twitter profile | | --- | --- | --- | | Eugenio Romano | Eugenio Romano | @RomanoEugenio | | Denys Vuika | Denys Vuika | @denisvuyka | | Mario Romano | Mario Romano | @MagemelloMario |

See all contributors

License

Apache Version 2.0