Src Folder Layout

The example given by the navigation skeleton app and most of the documentation out there tends to stick everything right in the root of src for simplicity's sake. For a "real" application, you may want to separate out some of the components into related folders.

This is the folder layout that I currently use for working on aurelia apps.

So far, I've found that it helps me keep track of things better. Just make sure to import/require things with their proper relative paths.

src folder layout

  • App.html and App.js still live in the root
  • The pages folder contains individual pages (corresponding to routes)
  • The components folder contains custom controls.
  • The value-converters folder contains all of my value converters
  • The lib folder contains utility classes that are not ViewModels, but are just plain old ES6 modules used throughout the application.