• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Creating a Minimal Aurelia TypeScript & Webpack Application From Scratch

Aurelia 1 Tutorials · March 14, 2017

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

  1. 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.
  2. 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

  1. Create a new folder somewhere on your machine, call it demo.
  2. Open up a Terminal/PowerShell window and navigate to the directory you created.
  3. Run yarn init and follow through the prompts, entering info as required.
  4. 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
  5. 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.

Dwayne

Leave a Reply Cancel reply

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rob Bohn
Rob Bohn
6 years ago

Nice! One thing to note: you need Node >=4.7 due to dependency of webpack-dev-server – I had 4.4.5 (and it’s a pain to update node on Windows – just putting that out there 🙂

0
Aziz
Aziz
5 years ago

you need to have this in your webpack config file

new AureliaPlugin({
aureliaApp: undefined
})
otherwise, the project wont compile…

0
Calvin
Calvin
5 years ago

Thanks for this, its exactly what I was looking for!

Starting a new Aurelia project, and I didn’t want to use jspm/systemjs – kept thinking there HAS to be a way to configure this the way I want.

0
Benny
Benny
5 years ago

Is this tutorial same for webpack 3?

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz