Generator for AT project scaffolding

Following the modern trend in web development, we are happy to tell you that the Aria Templates automatic tool to create project scaffolding is here.

Now, with the generator-ariatemplates, creating a basic AT project, a single AT skeleton file and an ‘Hello World’ project is something that you can do very fast.
The goal of this project is to give you a tool able to speed up the initial process of generating files and also to provide few best practices to use when you create Aria Templates applications.


Please have a look at the github page too.


We decided to implement an AT generator using Yeoman in order to follow the “guidelines” suggested for web development (take a look at Paul Irish’s talk).

The Aria Templates generator is available through npm and is very easy to install and use.
The only thing to do to download and install the generator is:

npm install -g generator-ariatemplates (take a look at the github repo for more info.)

After that, everything is ready to generate your project.

We decided to give you 3 possibilities:

  • generate a very basic project;
  • generate a specific file, like templates, controllers, etc;
  • customize the process of generating files, choosing which file to create;

Let’s have a look to the first possibility.

To be able to generate a very basic Aria Templates project, you just need to go inside the folder that will contain your project (i.e. “myfolder”) and run:

yo ariatemplates.

The generator will ask you for a name for your application (i.e. “myapp”), insert the name and press enter, that’s it!
The generator will do the dirty work for you and at the end you’ll have this folder structure for your project:

folder structure

As you can see, inside your folder, you’ll find different files and folders:

  • ariatemplates folder: using bower, the generator downloaded the latest version of aria templates automatically and drop it inside your project folder, so you won’t need to do it yourself;
  • myapp folder: this is actually your application folder, inside of it you’ll find a template with a template script and a css template associated, a controller an interface and a macro library;
  • package.json: the package descriptor for your application;
  • bower.json: the bower descriptor for your application;
  • index.html: your bootstrap file;
  • Gruntfile.js: the grunt file that will give you the possibility to run and test your application immediately;

So, yes you have your Aria Templates application project ready, what about if we launch it and see how it looks like?

To do it just launch the command:

grunt server.

The generator will open a tab on your browser and display the hello world application created, that it looks like this:


That’s it! This is your first Aria Templates application running.

But, there is one more thing.

Let’s say you don’t like the Hello world example and you want to create something different starting from this project, you can start editing the templates and all the other AT files with your text editor and see the application updating itself every time you save your work. This is the live reload feature that comes directly with yeoman.

Now that you are familiar with AT applications you can continue working on it adding new files, like new templates or new controllers. Instead of doing copy/paste from existing files, you can simply generate as many files as you want using the generator.

For example, to generate new templates, just type:

yo ariatemplates:template MySecondTemplate MyThirdTemplate

or to generate new controllers:

yo ariatemplates:controller MySecondController MyThirdController.

You can also create:

  • Template Script: yo ariatemplates:templatescript MyTemplateScript
  • Template Css: yo ariatemplates:csstemplate MyTemplateStyle
  • Macro: yo ariatemplates:macro MyLibrary
  • Interface: yo ariatemplates:interface IMyInterface
  • Bootstrap file: yo ariatemplates:bootstrap index

Please try to follow the structure suggested by the generator either when you generate single files; templates and template scripts inside the view folder, css templates inside the style folder, macro libraries inside the lib folder.

If you want to take a bit more of control on the generator you can also run it in wizard mode in order to choose which file generate for your project.

You just need to type:

yo ariatemplates --wizard.

The generator will prompt you some questions. You just need to answer them and you’ll have exactely the files that you need for your application.

For more information, please have a look at the github page.

Leave a Reply

Your email address will not be published. Required fields are marked *