Creating a Minimal Aurelia TypeScript & Webpack Application From Scratch

Today we are going to be creating a Webpack based Aurelia application from scratch. We will be leveraging the newly released Webpack capabilities for this tutorial.

Until such time that the Aurelia CLI allows us to build customisable Webpack builds from scratch, we will be doing it manually. A great opportunity to familiarise yourself with how Aurelia and Webpack work without relying on tools and skeletons.

Once you have your prerequisites, getting an application ready to build off of takes about 5 minutes. Not too shabby considering we’re doing everything manually and from scratch, right?

Prerequisites

Node.js – this is what all our tooling uses as well as front-end code. We can’t do anything without it. Download one of the downloadable installers and follow the prompts.
Yarn – Yarn is a replacement for Npm (Node Package Manager) and provides added benefits such as caching and faster installs. Once more, just grab one of the downloadable installers and follow the prompts.

Installing dependencies

Create a new folder somewhere on your machine, call it demo.
Open up a Terminal/PowerShell window and navigate to the directory you created.
Run yarn init and follow through the prompts, entering info as required.
Install needed development dependencies: yarn add aurelia-webpack-plugin css-loader html-loader style-loader awesome-typescript-loader tslib typescript webpack webpack-dev-server --dev
Install needed dependencies: yarn add aurelia-bootstrapper

Building the application

In the root directory, create a new file called index.html and add in the following:

This will be our root index file that the browser looks for when we load our application.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body aurelia-app="main">
    <script src="/dist/main.js"></script>
  </body>
</html>

Create a file called webpack.config.js in the root directory:

This is our Webpack configuration file. There are no abstractions, everything you see is a valid Webpack configuration option. You can read all about configuring Webpack over at the official documentation site here.

const path = require("path");
const { AureliaPlugin } = require("aurelia-webpack-plugin");

module.exports = {
  entry: "aurelia-bootstrapper",

  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "[name].js",    
    chunkFilename: "[name].js"
  },

  resolve: {
    extensions: [".ts", ".js"],
    modules: ["src", "node_modules"].map(x => path.resolve(x)),
  },

  module: {
    rules: [
      { test: /\.css$/i, use: ["style-loader", "css-loader"] },
      { test: /\.ts$/i, use: "awesome-typescript-loader" },
      { test: /\.html$/i, use: "html-loader" },
    ]
  },  

  plugins: [
    new AureliaPlugin(),
  ],
};

Create a file called tsconfig.json in the root directory with the following:

This is our TypeScript configuration file. When TypeScript compiles your application, it reads this file to determine what module formats to produce and what options. We are targeting ES5 and for the module format es2015 to allow for tree-shaking.

{
  "compilerOptions": { 
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",  
    "lib": [ "es2017", "dom" ],
    "importHelpers": true,
    
    "experimentalDecorators": true
  }
}

Now, create a new directory called src and then a file called main.ts with the following:

This is our entry point from a code perspective. If you scroll up, you’ll notice the aurelia-app tag on the body has a value of main this is the file it is referring to.

import { Aurelia, PLATFORM } from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
         .standardConfiguration()
         .developmentLogging();
  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

In the newly created src folder create two files: app.ts and app.html with the following:

These are the default view-model and view files we load when the browser spins up our app. We define this as our main application starting point for render on the last line of our main.ts file.

export class App {

}

<template>
    <h1>Hello, world!</h1>
</template>

Finally, run the app: yarn webpack-dev-server --hot --inline which will be accessible in your browser at: http://localhost:8080/

Conclusion

From here, you can build your Aurelia applications off a clean starting base. We haven’t configured any kind of testing or support for things like Sass, but these are things you can easily implement into a clean starting point like this.

Creating a Minimal Aurelia TypeScript & Webpack Application From Scratch

Prerequisites

Installing dependencies

Building the application

Conclusion

Dwayne

Leave a ReplyCancel reply