Google News
logo
Aurelia Interview Questions
In the aurelia_project directory there is a file called aurelia.json. This file is the centralized settings for all the gulp tasks like build and test. We will show you more details of this file when talking about various customization.
When creating a new project using the Aurelia CLI, you are presented with a wizard to select a bundler, a module loader, CSS preprocessor and more.
 
On top of all choices, you first need to choose a bundler: either Webpack (the default bundler) or CLI's built-in bundler (the alternative bundler).
 
Webpack : 
* Webpack is the default choice for both ESNext and TypeScript applications.
 
* Webpack is a bundler with built-in module loader. If you choose to use Webpack then you don't need a separate module loader. Webpack is powerful and popular, but it could be a daunting task to set up Webpack from scratch. Aurelia CLI generates a battle-tested Webpack configuration file for your app, provides a solid base for further customization if you ever need to.
 
CLI's Built-in Bundler : 
* Aurelia CLI ships with an in-house made bundler providing similar functionality of Webpack but with much simpler configuration. If you have no experience on Webpack, we recommend using the built-in bundler.
 
* The built-in bundler is paired with module loader RequireJS or SystemJS.
 
* RequireJS has been around for a very long time, it's the reference module loader for AMD module format. Comparing to SystemJS, it is considered a bit more mature and stable, but with fewer features.

* SystemJS is a "Dynamic ES module loader", the most versatile module loader in JavaScript world, supporting AMD/CommonJS/UMD or Native ESNext module format. This gives you most freedom at runtime.
There are differences between the Aurelia CLI bundler and the Webpack bundler. When you are migrating an existing application from the integrated bundler to Webpack there are a few things to keep in mind.
 
Webpack requires the use of PLATFORM.moduleName() for any module reference in the code, except for the import statements. PLATFORM can be imported using import {PLATFORM} from 'aurelia-pal';.
 
A few examples :
 
* in main.js or main.ts do aurelia.setRoot(PLATFORM.moduleName('app')).
* for routes do { ...., name: 'users', moduleId: PLATFORM.moduleName('./users'), ... }
* @useView(PLATFORM.moduleName('my-view.html'))
* .resources(PLATFORM.moduleName('resources/index'))
* when Webpack cannot find a module even though it exists, you likely are missing a PLATFORM.moduleName for that module

The Aurelia CLI bundler gets its bundle configuration from the aurelia_project/aurelia.json file. This is different for Webpack, where the bundle configuration is inside webpack.config.js. Webpack projects created by the CLI use Aurelia's Webpack Plugin, which you'll find in webpack.config.js.
 
If you use SASS or LESS, then you are going to have to import the stylesheets differently. When you include stylesheets and use the Aurelia CLI bundler, then your <require> statements will have the .css extension: <require from="styles/my-stylesheet.css"></require>. When you use Webpack you have to change this into the .sass or .less extension: <require from="styles/my-stylesheet.sass"></require>.
There are a few steps involved to update the Aurelia CLI to a newer version. In this chapter, these steps will be explained.
 
Good thing to know is that Aurelia CLI is actually installed twice, once globally and once locally. The globally installed Aurelia CLI (npm install aurelia-cli -g) can be found in your user profile and the local one lives inside the node_modules folder of your project. The global Aurelia CLI is used when you're not inside a project directory, for example when you create a new Aurelia CLI project using au new. Inside a project directory, however, the local version of Aurelia CLI is used. That allows you to use different versions of the Aurelia CLI per project.
 
Since the CLI is installed both globally and locally, you need to update both. First, run npm install aurelia-cli@latest -g to update the CLI globally, and run npm install -D aurelia-cli@latest from the project directory to update the local Aurelia CLI.
 
We're continuously improving the project setup to make development better and easier. This sometimes involves updating Gulp tasks. So when you want to update an existing project, you'll want to update the Gulp tasks as well. The recommended way to do this is to update the CLI globally and create a new project using au new. Then you can copy over the tasks in the aurelia_project/tasks directory to your own project.
 
Always check out the release notes on the Aurelia blog as they may contain additional instructions for updating the CLI.