I’ve been experimenting with embedding an existing Ember App into a React App. In the React app I create a component that creates link and script elements to import .js and .css from the React app’s dist directory. The Ember App is configure to mount to an element/class within the React component.
I’d like to export keep my ember app in a npm module, include it in the React app’s package.json dependencies, and then mount the app from the parents component. Anyone have any ideas how that could be accomplished?
Does your app build using Embroider? Until Embroider an Ember app wasn’t really a true set of ES6 modules but rather a set of requirejs modules. So importing as an npm module may get a tad complicated. Pursuing the vendored CSS/JS may work better in the short run, though your issues with CSS snags is surprising …
Thanks for the reply - I did try with and without Embroider in the scenario I mentioned above and the css performed the same.
I’ve now tried a different tack where I am creating a module with a single React component that loads Ember. In that situation I import the css directly in react "Ie ‘import "./vendors.css’ " and I place the js (non-embroider) under a public/assets directory to load through script tags. This works fine but I need to either
(preferably) be able to load the app.js directly into the React component -I’m going to re-build with embroider and see if I can just import ./app.js (I’ve really got to dive deeper into import and ES6 modules to know if that’s silly to even consider) or
Just change the parent React app’s build to move my ‘js’ files to its own assets directory at build time.
So I’ve given up on the 'import vendor.js; import my-app.js" from a React Component for now - there are too many layers trying to process the code. Will do some more study and try again in the future. In the meantime I just need to figure out where I can host my vendor/app.js where the parent app can access it from the same domain.
Would still love to know what others are trying in this regard (Ember mounted in React rather than vice versa). I’ll probably have to end up creating a migration plan from Ember to React because we were bought by a React shop and I don’t think I’ll be able to spend a lot of time trying to cram a framework into React that wasn’t mean to play that way.
Update: It looks like my problems with CSS is just that they files were too large - or perhaps had some kind of corrupted output that was removed when I cleaned them up - I can import that cleanly now. Still using script tags for the app - going to revisit embroider soon. I think what would help is if I could stop the Embroider build between the core-compile and the webpack compile and just let the host import the code at that level, but I still don’t know enough to know if that’s actually a solution.