Webpack Support Lands In Aurelia CLI

I have been waiting for this day to come for a long time now: the Aurelia CLI now supports scaffolding Webpack applications from scratch. My biggest gripe with the skeletons the Aurelia team provide is they have a lot of stuff in them I have to remove for every new project. Admittedly, the skeletons serve … 

 

Checking If a View Slot Is Defined In Aurelia

Aurelia supports the <slot> element provided via the HTML Web Components specification, which allows you to define placeholders in your HTML that can be replaced. A lot of examples around seem to wrap a slot with a DIV, perhaps a class. The issue with this approach is if you have a styled DIV wrapping a … 

 

Aurelia Routing + Switching Root Using setRoot

In your Aurelia applications, you might have two or more roots defining different entry points into your application. I personally create a public facing root which has public routes and an auth protected shell which has routes for logged in users only. Let’s say for this example you have two roots: publicRoot and privateRoot. Your … 

 

Module ES2015 and TypeScript 2.4 Dynamic Imports

Introduced in TypeScript 2.4 is support for the ECMAScript dynamic imports feature. If you didn’t see the announcement or read it properly, you’re probably here because you’re getting the following error. In my case I use Webpack and I was trying to add in some dynamic import goodness and getting this error: Dynamic import cannot … 

 

Auth Protected Routes in Aurelia With Firebase

sing both Aurelia and firebase together is exceptionally convenient for my workflow. When it comes to authentication, I have certain routes I want to protect. The best way to add in authentication checks for routes in Aurelia is to create a router pipeline step. Specifically, an authorise pipeline step. Because of the way Firebase uses … 

 

Aurelia Dynamic Compose + Webpack = Module ID Not Found

If you’re using the latest and greatest Webpack plugin for Aurelia, there is a possibility if you use the <compose> element to dynamically render UI you will run into an issue where Webpack doesn’t know about the dynamic imports. Specifically, I am talking about usage of <compose> that might look like the following: <template> <compose …