Aurelia Typescript/Webpack Skeleton + Progressive Enhancement

Question

I'm attempting to leverage the progressive enhancement feature of Aurelia using the typescript/webpack skeleton, but I can't get it to work at all using the example shown in the docs. I'm sure it is because that example is using JSPM/SystemJS, but I can't seem to find a Webpack example anywhere. Here's what I have currently:

./src/hello-world.ts

export class HelloWorld {}

./src/hello-world.html

<template>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, voluptatem. Amet expedita doloribus itaque explicabo
        ex ducimus temporibus quisquam asperiores eveniet beatae, magni eum fuga reprehenderit obcaecati quasi ipsam minima?</p>
</template>

./src/main.ts

import '../static/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import * as Bluebird from 'bluebird';

Bluebird.config({ warnings: { wForgottenReturn: false } });

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .defaultBindingLanguage()
    .defaultResources()
    .developmentLogging()
    .globalResources(PLATFORM.moduleName('hello-world'));

  await aurelia.start().then(() => aurelia.enhance())
}

./index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%- htmlWebpackPlugin.options.metadata.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">
    <!-- imported CSS are concatenated and added automatically -->
  </head>
  <body>
    <hello-world></hello-world>

    <% if (htmlWebpackPlugin.options.metadata.server) { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>
  </body>
</html>

When I run npm start to test the app out, all I get is a blank page with the <hello-world></hello-world> component sitting at the top of the body, but empty and not filled with the template html. Webpack is outputting the correct js files however, so I'm not sure if it has to do with the js trying to run before the window has loaded, or if there's another issue.

Does anyone know if this is achievable?

score 0 · Accepted Answer · answered Aug 29 '18 at 17:57

After reading the docs more carefully and enlisting the help of a more front-end savvy colleague, I was able to get this to work using the manual bootstrapping Aurelia offers (specifically the "Manual Bootstrapping with Webpack" section in that link). The docs however are still out of date, as you can simply use the aurelia-bootstrapper package and no longer need the aurelia-bootstrapper-webpack package, which was giving me build errors anyways.

First, you need to update the app property in the entry node of your webpack.config.js file to point to main.ts:

entry: {
    app: ['./src/main'],
    // other properties omitted...
  }

Then update main.ts with the manual bootstrapping code:

import '../static/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import * as Bluebird from 'bluebird';

Bluebird.config({ warnings: { wForgottenReturn: false } });

bootstrap(async (aurelia: Aurelia) => {
  aurelia.use
    .defaultBindingLanguage()
    .defaultResources()
    .developmentLogging()
    .globalResources(PLATFORM.moduleName('hello-world'));

  await aurelia.start()
    .then(() => aurelia.enhance())
    .catch(err => console.log(err))
})

Now your component should be enhanced.

Aurelia Typescript/Webpack Skeleton + Progressive Enhancement

1 Answers1