aurelia Aurelia CLI Explained Aurelia CLI Basics Explained

Example

This Example assumes you setup as explained in Example: Setting Up Environment for aurelia-cli Explained of this document.

Creating a new project

• In main host os, open terminal (Mac OS in my case)

• $cd /path/to/project/vagrant

• $vagrant up (Launches VM GUI)

• Log into VM via UI

  • User: vagrant / PW: vagrant
  • $startx
  • Windows X starts Gnome session
  • Open a terminal in VM

• $cd /home/vagrant

• $au new (starts a series of prompts to setup project)

  • Prompt: Please enter a name for your new project below.
  • $[aurelia-app]> MyProject (Press Enter) (This will be the name of project main directory)
  • Prompt: Would you like to use the default setup or customize your choices?
  • $[Default ESNext] > 3 (Press Enter) (Custom options)
  • Prompt: What transpiler would you like to use?
  • $[Babel] > (Press Enter) (Lets use Bable to transpile our ESNext to ES5)
  • Prompt: What css processor would you like to use?
  • $[none] > 3 (If you want to use Sass for your css)
  • Prompt Would you like to configure unit testing?
  • $[Yes] > 2 (Lets not setup testing for simplicity)
  • Prompt What is your default code editor?
  • $[Visual Studio Code] > 2 (Atom, if you followed setup for this document)
  • Outputs Setup Summary
    • Project Configuration
    • Name: MyProject
    • Platform: Web
    • Transpiler: Babel
    • CSS Processor: Sass
    • Unit Test Runner: None
    • Editor: Atom
  • Prompt Would you like to create this project?
  • $[Yes] > 1 (Press Enter)
  • Prompt Would you like to install the project dependencies?
  • $[Yes] > 1 (Press Enter)

  Creates directory structure and downloads all the dependencies via npm.

  You're now done and ready to start building!

Basic Project directory structure

• /home/vagrant/MyProject
  • /aurelia_project (Configuration files, Gulp Tasks, Generators)
  • /scripts (Builds publish here)
  • /src (This is where you will be wroking primarily)
    • resources (Put your images/fonts/icons here.)
    • app.js (The default View-Model)
    • app.html (The default View for an Aurelia App. The main entry point)
    • environment.js
    • main.js
  • favicon.ico
  • index.html (No need to edit this file)
  • package.json (npm install --save adds entries to this file)

Development cycle on the VM

• Open Atom, add project folder: /home/vagrant/MyProject
  • This is where you will be editing the html/js/scss files
• Open a Terminal:
  • $au run --watch (Builds app, starts BrowserSynch web server)
• Open web browser of choice in VM and go to: http://localhost:9000
  • As you edit your code and save files, you will see the updates live
• If you setup using Vagrantfile above, then you can use browser in Host OS (Mac OS) and go to: http://192.168.0.3:9000