How to have multiple instances of an app in same window

Ember CLI
1

I want to create an Ember based widget that I can give to partners of my project to embed on their sites.

I’ve got a proof of concept working as noted here:

A good start, but I also want it to be possible to have multiple instances of the Ember.js app running in a given window from different rootElement divs and with some other different passed in values.

Any suggestions?

1 Like
2

I’ve got this working and will be writing up my approach. Expect blog post about it before long.

2 Likes
3

I don’t have a blog post yet, but I do have some example open source code that is working in the wild (couple css rough spots at the moment, but hopefully sorted out soon).

The ember-cli based Ember app is here:

The README is a decent preview of how things are wired together. It takes advantage of two key addons:

https://github.com/walter/ember-cli-make-concoction # this is what allows the jQuery widget loader to create unique instances of the address-widget Ember app

https://github.com/walter/ember-cli-meta-options # allows for passing settings to an Ember app, in my case the jQuery loader handles putting the settings in place as meta tags

Here is jQuery loader itself:

https://github.com/opengovernment/askthem/blob/master/public/widgets/address/widget.js # check the README in the same directory for prep details

Finally the embedded code looks like this:

<script class="at-widget-loader" src="http://www.askthem.io/widgets/address/widget.js" data-headline="Ask your elected officials a question" type="text/javascript" async></script>

or a more elaborate example:

<script class="at-widget-loader" src="http://www.askthem.io/widgets/address/widget.js" data-tag-id="at-zip-example" type="text/javascript" async></script>

<div style="display: none;" data-tag-id="at-zip-example" class="at-widget-attributes"> <div class="headline">Custom Headline</div> <div class="question-summary">Custom Summary with <b>HTML!</b></div> <div class="question-body">custom body</div> </div>

There is a fair bit you need to do with getting CORS in place to allow this stuff to work as well. I found this helpful:

http://benjaminhorn.io/code/setting-cors-cross-origin-resource-sharing-on-apache-with-correct-response-headers-allowing-everything-through/

You also need to go through your config/environment.js CORS stuff and add all the sources of your images, fonts, scripts, etc.

That will have to do for now. Feel free to ask questions here.

4 Likes
4

Thanks for sharing your experiences here. I’ve been thinking through an implementation where I could extract components from an bigger Ember application and place them selectively on a public marketing pages as demo widgets.

For the sake of explanation, imagine a super weather service that requires a subscription to access. But on the sales site you’d want a “enter your zipcode” and show an actual component from the live application doing its thing, that it can in fact do what it says on the tin… Hope the ridiculousness doesn’t deter from the end goal here. Getting the component to behave slightly different is easily tweaked with feature flags, it is the deployment story I was curious about.

Basically I want the marketing pages to be separate mini-sites that be driven by sales & marketing, and isolate the application from that kind of volatility, but at the same time selectively show off bits and pieces (via components) to the public.

I’ll give this a go in a week or two when I get there, on to the next planning steps.