- Hands-On Full Stack Web Development with Aurelia
- Diego Jose Argüelles Rojas Erikson Haziz Murrugarra Sifuentes
- 448字
- 2021-06-25 20:58:23
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.
- 智慧城市:大數據、互聯網時代的城市治理(第4版)
- 自動駕駛網絡:自智時代的網絡架構
- EDA技術與VHDL編程
- 物聯網安全與深度學習技術
- 企業私有云建設指南
- 數字通信同步技術的MATLAB與FPGA實現:Altera/Verilog版(第2版)
- 智慧光網絡:關鍵技術、應用實踐和未來演進
- IPv6網絡切片:使能千行百業新體驗
- Echo Quick Start Guide
- Practical Web Penetration Testing
- 無線傳感器網絡定位技術
- 5G技術核心與增強:從R15到R17
- 互聯網安全的40個智慧洞見(2016)
- Corona SDK Application Design
- ReasonML Quick Start Guide