Creating our app
Let's start creating our application. If you remember our last section about the Aurelia CLI, we need to use it again to create a new application, so open your favorite Terminal tool and execute the following command:
au new worldcup-app
Enter the following input in the Terminal:
- Select 3 to define our custom options for this project
First option: Which module loader / bundler would you like to use? RequireJS (Default)
Second option: What transpiler would you like to use? : Babel (Default)
Third option: How would you like to setup your template? : Default (No markup processing.)
Fourth option: What CSS processor would you like to use? In this case, we will choose Sass (3)
Fifth option: Would you like to configure unit testing? Of course, we will mark Yes (Default)
- Sixth option: What is your default code editor? We use WebStorm, but you can choose the most familiar to you.
Now, you will see the main structure of your application on the console:
Project Configuration
Name: worldcup-app
Platform: Web
Bundler: Aurelia-CLI
Loader: RequireJS
Transpiler: Babel
Markup Processor: None
CSS Processor: Sass
Unit Test Runner: Karma
Editor: WebStorm
- Finally, select 1 to create the project and then install the project dependencies
This is a custom setup. Our project will be composed with the following features:
- RequireJS: Well known file and module loader, with a good browser support. Another option could be SystemJS and Webpack.
- Babel: Babel is one of the most used transpilation tools nowadays. A transpiler is a tool that transforms code written in JavaScript ES6 syntax or later into ES5 code. Why? Because most of the browsers does not have well supported yet the last JavaScript version.
- Markup processing: It loads our modules and create the final files which will be interpreted by the browser. We won't use a custom markup processing in this stage.
- SASS: A nice preprocessor CSS library, we will review it at more detail in the next chapter.
- Karma: A JavaScript test library. We will talk about it in more detail in the Chapter 3, Testing and Debugging.
- WebStorm: A very nice IDE for JavaScript developers. It is not free but if you have an educational email account from your university or institute, you can get a student license for one year.
Once everything is done, open the worldcup-app folder with your favorite editor.
We know Webpack is a very awesome module loader, but for learning purposes, we prefer to use RequireJS across all this book because is more simple and let us explain better how to configure manually each tool and library we will use in this book.