• 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

Loading HTML From A URL Endpoint In Aurelia Using Webpack

Aurelia 1 · April 6, 2016

I recently switched over to using Webpack in my Aurelia application that I have been building at my day job. One of the caveats I encountered as a result of ditching Jspm/System.js is the ability of being able to supply a URL to getViewStrategy because Webpack requires knowing all paths at bundle time, this approach goes out the window.

But, I recently encountered something cool that allows you to request HTML from the server and then use it as a view within your current custom component or wherever using InlineViewStrategy. Essentially this gives you the ability to take arbitary HTML wrapped in <template></template> tags and use it as a view.

Firstly, why would I want to do this? I am working within the confines of a .NET application. Some parts of the Aurelia application are server-side generated .cshtml partials for reasons I will not go into. I need to get some HTML and then use it as a view within my application. Previously I could do the following.

Viewmodel:

export class MyCustomElement {
    view: any = '';

    constructor() {
        this.view = '/Controller/partialName';
    }
}

View:

<template>
    <compose view.bind="view"></compose>
</template>

But if you switch over to Webpack you lose the ability to dynamically load views from a .NET controller or whatever, but I came up with a way to do it using a standard XMLHttpRequest and InlineViewStrategy.

As you will see below, we make a simple HTTP request to our server which is sending back HTML wrapped in <template> tags.

I could have just created a custom loader for use with Webpack to handle loading dynamic content, but it seemed like just doing it using an InlineViewStrategy achieved the same thing and was more straightforward. If I do create a loader, you’ll hear about it.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Brett Baggott
Brett Baggott
6 years ago

I’m just now starting down the same road as you with ASP.NET Core, Typescript, and webpack. I would have hit this issue almost immediately, so I’m glad you’ve already solved it :). I’m thinking of using your typescript-webpack-starter as reference https://github.com/Vheissu/aurelia-typescript-webpack-starter as there isn’t an ASP.NET Core based typescript and webpack example yet. Thanks for this post.

0
Stefan
Stefan
6 years ago

I have a question.
Is it possible by the same way (InlineViewStrategy), to render html pages with composite UI of jQery components and events ? e.g a page with many Syncfusion widgets,fetching their data from the back-end REST API ?
Something like rendering them as iframes , only Aurelia to handle the routing part ?
This will give us, a lot of flexibility, till the component providers prepare their bindings for Aurelia.
thank you
Stefan

0
nadya
nadya
6 years ago

Thanks, Dwayne.

What other drawback have you run into because of the switch from the jspm? Or is this the only one? Is is still worth switching to webpack?

Thanks in advance.
Nadya

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • Thoughts on the Flipper Zero
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Reliably waiting for network responses in Playwright
  • Wild Natural Deodorant Review

Recent Comments

  • Dwayne on Is Asking Developers How to Write FizzBuzz Outdated?
  • kevmeister68 on Is Asking Developers How to Write FizzBuzz Outdated?
  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz