generator-aurelia-ts

Aurelia Turbo Start generator

Generate an Aurelia Quick Start project with:

• Aurelia CLI
• TypeScript definitions
• SASS or Stylus
• UI frameworks of your choice (Bootstrap, Foundation, F7, Semantic IO)
• Aurelia Plugins installed and ready for use

Generators

• aurelia-ts (new app)
• aurelia-ts:decorate (decorate app)
• aurelia-ts:plugins (add plugins)
• aurelia-ts:cli (add CLI)
• aurelia-ts:styles (add CSS preprocessors: SCSS/SASS/Stylus )
• aurelia-ts:layout (add ui/layout framework:)
• aurelia-ts:javascript (javascript app)
• aurelia-ts:typescript (typescript app)
• aurelia-ts:state (add state or stores)
• aurelia-ts:amp - (add Ampersand models/collections)

Now includes IE9 support ;)

Compatibility

The genrator has been tested successfully on Node.js 0.12.7

We recommend that you use nvm to manage your system installed Node versions.

Install NVM

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash

We highly recommend using IOjs or the latest Node.js (>0.12)

To install IOjs via NVM:

• nvm ls-remote - list of Node and IOjs versions available
• nvm install iojs - install latest IOjs
• nvm alias default iojs - make iojs your default (optional)
• node -v

Layout Frameworks

Run: yo aurelia-ts:layout

The layout generator currently supports:

Font frameworks

• Font Awesome

CSS frameworks

• Bootstrap
• Bootstrap Material
• Zurb Foundation
• Semantic UI
• Framework7

Make a pull request to make the generator support your favorite alternative UI/Layout framework (see Contributing below).

TypeScript

We currently use Aurelia Typings as of August 17th, 2015.

We would like to soon integrate use of the aurelia-amd-bundler

Ideas on how to best achieve TypeScript support are most welcome!

Install

To install generator-aurelia-ts via npm, run:

npm install -g generator-aurelia-ts

Run

Create a folder for your app:

mkdir my-app
cd my-app

Initiate the app generator (default):

yo aurelia-ts

Note: If for some reason it tries to install in a parent folder, check out Issue #4

Answer the prompts in order to generate your Aurelia project to suit your preferences.

Generator arguments & options

You can pass the application name as the first argument

yo aurelia-ts my-app

Run with TypeScript --ts and Plugins --plugins generators auto enabled.

yo aurelia-ts --ts --plugins

CSS language extension options

The generator also supports SCSS, SASS (indented syntax) and Stylus via --scss, --sass and --stylus options

yo aurelia-ts --stylus

All of them could be passed in to the generator, then it is up to the user deal with the various preprocessors in one project.

Stylus plugins

• Nib
• Axis
• Rupture
• Fluidity
• Typographic
• Jeet

We highly recommend watching these Stylus tutorial videos to get a feel and understanding of the power of using Stylus with plugins and get over the temptation to use Bootstrap or kin for all your styling needs. Break your bad habits ;)

UI framework option

You can also pass the UI framework as a --ui option

yo aurelia-ts --stylus --ui sem

The ui can take any of these shorthands: - bs Bootstrap - zurb Zurb Foundation - sem Semantic-UI - f7 Framework7

Prompts

You will be prompted for the following:

• application name?
• application title?
• github account?
• Author email?
• Author name?
• Install Aurelia CLI?
• Install TypeScript?
• Visual Studio?

TypeScript

After setting up the basic project structure, the main generator will ask if you want TypeScript. You can always add TypeScript to your project at any time by calling the typescript sub-generator.

yo aurelia-ts:typescript

Note: The typescript generator will clear your javascript files and rewrite the skeleton files as .ts files. Be sure you have committed your code before running any generator!

Plugins

Experimental support for installing around a dozen Aurelia plugins:

yo aurelia-ts:plugins

• Flux
• Authentication
• Validation
• i18next
• Computed properties
• Bootstrap Modal
• Rethink DB bindings
• Breeze bindings
• ...
• (TODO: Add YOUR favorite plugins...)

See jspm registry for predefined entries setup to be installed by name, such as: jspm install semantic-ui

Frameworks

Semantic-UI

For Semantic-UI you should reference /semantic/dist in app.js

// import '../semantic/dist'; // your themes and customizations

You can then customize your layout from within the /semantic folder using: - Build tools - Theming - Recipes

Contributing

As you add features, add yeoman tests

npm test

Use npm link to install it locally to test it as you develop ;)

Create a symbolic link to your local generator:

npm link generator-aurelia-ts

Now use the linked package and test it

yo aurelia-ts

Profit!

Adding your Favorite Framework to the generator

Example F7:

For the layout generator:

Add a new entry to the repoKeyMap at the top, such as:

var repoKeyMap = {
  ...,
  'Framework7': 'github:nolimits4web/Framework7@master'
}

Add the JSPM imports to templates/src/app.js. JSPM can load css via the JSPM CSS loader

See the framework7 distribution folder and use it to guide your ES2015 module imports.

Also check out the package.json for the project.

We can see, it has a main entry pointing to dist/js/framework7.js so we can safely import the js via import 'framework7';

The css imports needs to reference the dist folder structure directly.

We add the following to src/_ui.js template. The same template will be used for TS.

<% if (framework7) { %>
import 'framework7';
import 'framework7/css/framework7.ios.css!';
import 'framework7/css/framework7.ios.colors.css!';
<% } %>

Finally test that it all works by adding a unit test, such as:

test/test-layout-framework7.js

Then run npm test. If all tests pass, you can make a PR :)

Troubleshooting

If while developing the generator you get an error such as:

Uncaught SyntaxError: Unexpected token return

Most likely due to an EJS template error (typically a missing } in an if clause).

Contributors

• @telekosmos
• @kristianmandrup
• You :)

TODO

Ideas for improvement are welcome :)

• Update TypeScript generator according to aurelia-typescript-skeleton
• Force npm install -g jspm@beta
• Support for Aurelia's built in .d.ts files Issue #7
• More UI frameworks ...??
• Support for more editors/IDEs: Visual Studio, WebStorm etc.

License

MIT