meteor-aurelia

YOU CAN CONTINUE TO USE THIS PACKAGE BUT YOU HAVE AN ALTERNATIVE USING skeleton-esnext-webpack OR skeleton-typescript-webpack FROM AURELIA WITH meteor-webpack-client.

This module is just to load Aurelia on Meteor 1.3 using NPM.

For the static loading of html, we can't use the static-html package as it don't compile <template> alone. So we use sdenis:static-raw-html in place. It is a fork of tsumina:meteor-aurelia.

The Aurelia bootstrapper for Meteor is aurelia-bootstrapper-meteor witch is a fork of aurelia-bootstrapper-webpack.

The Aurelia loader for Meteor is aurelia-loader-meteor witch is a fork of aurelia-loader-webpack.

If you want to use ES6 in place of ES5 just install pbastowski:angular-babel in place of the new ecmascript to be able to use new decorators.

Aurelia Meteor

Aurelia and Meteor power combined. Use Jade and html-minify to speed up your works.

You must remove blaze-html-templates package because this will handle *.html files. Just use:

$ meteor remove blaze-html-templates
$ meteor add sdenis:aurelia

Quick start with Aurelia

Install Meteor $ curl https://install.meteor.com | /bin/sh
Create a new meteor app using $ meteor create myapp or navigate to the root of your existing app

Install Aurelia:

$ meteor remove blaze-html-templates
$ meteor add sdenis:aurelia
$ meteor npm install --save aurelia-bootstrapper-meteor

Install some third party aurelia libraries

$ meteor npm install --save "some other aurelia libraries"
$ meteor npm install --save "some other third party aurelia libraries"
$ meteor npm dedupe # if necessary due to errors or if you wish to a have smaller download size

If you need typescript
```
$ meteor add barbatus:typescript
```

Example

Example application : A meteor-aurelia port of skeleton-navigation
Aurelia-TODO-App is an simple example to show how to play with typescript and aurelia.
aurelia-meteor-todos is another one port from advanced meteor todos app by Markusxmr. Here to see the live demo

Tutorial

Aurelia use conventions to keep code simple and clean, to bootstrap an aurelia app you need a index.html or client/index.html, include:

<body aurelia-app='client/main'>
</body>

The aurelia-app="client/main" attribute points to the Aurelia configuration file named main, which is main.js.

Assume you use es5 js and html template. In the client folder create main.js and insert:

import 'aurelia-bootstrapper-meteor';

export function configure(aurelia) {
  aurelia.use
  .standardConfiguration();

  aurelia.start().then(() => aurelia.setRoot('client/app'));
}

The main.js is the file where the configuration is done to bootstrap Aurelia.

In this case the main file tells where the entry point of the app is located (client/app), which means go look for the app.html, app.js pair in the client folder.

By convention Aurelia uses view/view-model pairs of the same name.

In the client folder, create app.html and insert:

<template>
  <input type="text" placeholder="Your name" value.bind="name">
  <h2>Hello ${name}!</h2>
</template>

Then create app.js in the client folder and insert:

export class App {
  constructor() {
    this.name = '';
  }
}

NOTA BENE 1

When using the developmentLogging plugin of Aurelia, you have to add the following package :

$ meteor npm install --save aurelia-logging-console

and modify your main.js as follow :

import 'aurelia-bootstrapper-meteor';
import 'aurelia-logging-console';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot('client/app'));
}

NOTA BENE 2

When using logging without the developmentLogging plugin of Aurelia, you have to add the following packages :

$ meteor npm install --save aurelia-framework aurelia-logging-console