Using an aurelia component into a non-aurelia webpage

Help Requests
1

Hello,

I’ve built an aurelia project using the skeleton-typescript-webpack package and I’m planning to use it in a different webpage, that uses another framework (or it does not use aurelia).

I’m wondering if someone else encountered this use case? Ideally, the webpage that will consume the aurelia project / component should only have the name of my aurelia project listed as a dependency in the package.json file. From what I see, since the skeleton project is aimed for building SPAs, it will generate an index.html file where it will load all its dependencies (thanks to webpack bundling).

What would be the recommended approach? Should I just load that index.html file an an iframe in the webpage that will consume it? Another aspect is the communication between the the webpage and the aurelia project / component.

Thoughts?

2

By aurelia component you mean a stand alone app?
lookup Progressive Enhancement topic in the docs.
It might be just the thing you are looking for.

3

I’ve done it with Aurelia and System.js/jspm, but not with webpack. Definitely possible, but I believe there are some gotchas with bundling if you aren’t using the aurelia-cli for that. I could whip up an example using System.js if that would be helpful?

In my case, I skipped progressive enhancement and just had the component bootstrap it’s own Aurelia instance.

4

I’ve been doing this with a website that was built in Umbraco CMS. About 1,5 years ago when I first attempted this, I found progressive enhancement to give a lot of friction. I don’t know if this is still the case.

In the end I did something similar to jpray. Simply bundled up the app (without index.html) as a single standalone javascript file and included it as an asset in the master page.

I just have the CMS serve up a page with an empty div somewhere, and I load+call the bootstrapper directly. Then I configure Aurelia in the usual way and set that empty div as its root.

In the end, Aurelia doesn’t care whether it’s hosted by an index.html or by some remote hidden div inside a worker or iframe. As long as you can give Aurelia an element, everything will work fine. You could just as easily run multiple Aurelia apps simultaneously on the same page if you wanted to.

5

Thank you for your responses!

While I’ll give a look at Alexander-Taran 's suggestion (Progressive Enhancement), I think something along the lines of what @fkleuver and @jpray are saying is what I’ll need.

Basically, having a <div id="target"> which will serve as the root of the app and a .js injected in the webpage (the project with all its aurelia dependencies).

And yes, the wrapping webpage does not know anything about aurelia.

jpray, whoa, thanks, if that’s not too much for you, it would be awesome :slight_smile:

6

So unfortunately I’m having a tough time getting this into a working GistRun. For some reason its not liking how I do my imports, but if you play around with it locally with your bundling & module loading setup perhaps you can make it work for your needs…

The heart of the gist is this:

import { Container, Loader, Aurelia } from 'aurelia-framework';
import { starting, bootstrap } from 'aurelia-bootstrapper';
//GistRun Issue: none of the above imports are defined due to some syntax error it claims

// Returns: a promise that resolves with a new Aurelia instance
export function aureliaFactory() {
  return starting.then(function() {
    return (Container.instance ? Promise.resolve() : bootstrap(function(){})).then(function() {
      return new Aurelia(
        Container.instance.get(Loader),
        new Container()
      );
    });
  });
}
7

you might also have a look at my usage case Running Aurelia along with (inside) angular 1.x app :slight_smile: