Book Image

Learning Aurelia

By : Manuel Guilbault
Book Image

Learning Aurelia

By: Manuel Guilbault

Overview of this book

<p>Aurelia is one of the most promising new JavaScript frameworks for mobile, desktop, and web, which makes developing powerful, modern web applications a straightforward task. Its power lies in its simplicity and clear workflow that enables developers to build next-generations apps for the web with ease.</p> <p>From initial structuring to full deployment, this book will serve as a step-by-step guide to develop a modern web application from scratch with the Aurelia framework. In addition to including a comprehensive coverage of various Aurelia framework features, this book will also show you how to utilize these features in the real world to develop a professional single-page web application. You’ll see how to make the most out of Aurelia by understanding the Aurelia workflow and then applying it in real-world development tasks. By the end of the book, you will have learned to develop a clean and maintainable application in Aurelia from scratch.</p>
Table of Contents (20 chapters)
Learning Aurelia
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Adding libraries


External libraries are added using NPM, just like with CLI-based projects. However, in order for files to be included in bundles, external libraries must be referenced in JS files, because Webpack determines what must be included in bundles by analyzing the import statements of every JS module in the application.

You can see an example of this by checking the skeleton's main module:

src/main.js

// we want font-awesome to load as soon as possible to show the fa-spinner 
import '../styles/styles.css'; 
import 'font-awesome/css/font-awesome.css'; 
import 'bootstrap/dist/css/bootstrap.css'; 
import 'bootstrap'; 
//Omitted snippet... 

In the skeleton's sample application, all global resources such as the application's stylesheet, Font Awesome, Bootstrap's stylesheet, and the Bootstrap JS file are imported in the main.js file. These imports will tell Webpack to include these resources in the application bundle. Additionally, Webpack is smart enough to analyze CSS files for their dependencies. This means it knows how to handle imported CSS files, images, and font files.