Search code examples
javascriptdrupalmeteorembedddp

Embed a meteor app inside a non-meteor webpage

I am trying to embed a meteor app (a) hosted on server (A) inside a webpage (b) running on webserver (B) (In my case the meteor app is running on meteor.com and the webpage (b) is built on Drupal and hosted on another server running nginx and php). I found the following possible solutions but none works well or is elegant.

  • Insert the app (a) inside an iframe on webpage (b): Does not integrate well, clumsy solution.
  • Add the compiled meteor app js script inside the webpage (b) and provide the necessary meteor_runtime_config that instructs the app to connect to server (A): this works and the app is embedded, I have access to the Meteor js object but the app is rendered wrapped in <html> and <body> tags so it is not much use since I can't really position it in the page. And it feels like fighting meteor instead of playing well with it.
  • Connect to the meteor server through a DDP client such as https://github.com/eddflrs/meteor-ddp: while this provides much of the realtime data transfer functionality of meteor, it feels as if I am not really using meteor since I have to implement all js logic in webpage (b) and have meteor only handle the data transfer.

Is there any other solution or a way to improve any of the previously mentioned ones? Is this even possible at all or am I trying to use meteor in a way that it was not designed to? I have seen it mentioned on github "we support embedding Meteor content in non-Meteor content" https://github.com/meteor/meteor/issues/546#issuecomment-11458672 but what does this actually entail?

Solution

  • The github reference is irrelevent. It discusses integrating 3rd party widgets within a meteor app.

    You should have a look at this thread and this one from meteor-talk google group.

    Basically your assumptions are right. Currently, meteor is not the most pleasant of solutions for building widgets to be embedded elsewhere.

    Also, there are security concerns and consequences about embedding resources from external domains.

    I'd actually have a look at Firebase and APISpark where they provide an easy backend to any javascript frontend. But that requires wiring up your frontend code yourself, as you've already pointed out. But it should be easier than DDP.