Hello *,
I am currently working on a project were we want to achieve a decomposed UI / frontend that consists of different UI components /applications. The components will be integrated via client side transclusion into a main dashboard. The transclusion will be done with JavaScript and a reverse proxy. Each component should be a standalone application, running on its own server (e.g. nginx, NodeJS) and could be implemented with any UI technology, framework or platform (e.g. Angular 1, React, Meteor).
Advantages with this approach:
- Independent deployment of single UI components
- Several teams can work on different UI components
- UI Technology independent
To make my explanation more concrete I want to use an example. On a web shop we may have the following constellation:
- Main app (nginx reverse proxy, transcludes all other apps and does the routing)
- Article Search (Angular 1 App)
- Article Page (Meteor App)
- Checkout (React App)
- Shopping cart (Meteor App)
So my main question is…
What is the best and solid way to transclude / integrate a Meteor app into another (none Meteor) application using client side java script (like jquery load)?
Has anbody experiance with this kind of approach?
For now I tried the following:
First attempt: I used jquery load on the main app to load the html response of the meteor app running on localhost:3000. This results in the error “Uncaught SyntaxError: Unexpected token <” for every script tag from the meteor app.
Second attempt: I use plain JS to load the html of my meteor app, than parse it and insert it into the DOM. On the parsing step I strip out some problematic quotes and add the host:port (loalhost:3000) to the relative script src attributes that came back as response from the meteor app. It is working when the meteor app is running in production mode but in development mode I get the error “Meteor package is undefined”. Even if the transclusion of a meteor app is working, it may not be possible to use Meteor server side calls with Meteor.call from the client side of the meteor app.
You can manually simulate the transclusion process by using the html response of the meteor app and put the html directly into your main app. Of course this only works if you change the relative paths of the script tags in the meteor html response to an absolute url. So change it from /packages/meteor.js to http://localhost:3000/packages/meteor.js.
So all in all it looks like meteor was not made to be integrated as single app into another web application. What do you think about it?
Thank you for reading this. Every help or idea is welcome.
Best regards,
Markus