Displaying html files generated on webpack build

Help Requests
1

Hi, I have a blog posts generated from .md to .html during webpack build. These are generated to dist/blogposts folder. Is there a way to load these .html files in Aurelia? At the moment I am trying just to display one (hardcoded file name) during au run --watch

<template>
    <compose view="/blogposts/01.html"></compose>
</template>

but keep getting an error

Module not found: Error: Can't resolve '/01.html' in 'D:\web-app\src\pages\blog-article'
resolve '/01.html' in 'D:\web-app\src\pages\blog-article'
  try alternate dist: /dist/native-modules/ in only request

Any ideas how to get around this?

I’m using Aurelia v1

Thank you

2

With webpack, Aurelia v1 cannot dynamically load module at runtime. (You can do that with CLI bundler or dumber bundler, as they have an AMD loader at runtime). If you want to decouple blog post from your app, you probably should consider the AMD loader approach.

There is other option to run Aurelia v1 app as native ESM modules. But I have not tried any of that. https://github.com/aurelia-loader-esm

With webpack, you can statically bundle all the md files just like html files. Note Aurelia v1 requires html template wrapped inside <template> tag. We can use html-loader’s preprocessor to handle that.

2 Likes
3

Use an “iframe” with a dynamic binding like this example :

 <iframe src.bind= " '/blogposts/01.html' "></iframe>
1 Like