Webpack building embedded ember into a parent app

[miketervela]

Hi Folks - still trying to do non-Emberish things with React and Ember.

We are embedding an Ember app into a React Component to use in a React application. We load the fully compiled Ember app with a dynamic script tag and use the ember-cli-embedded addon to get a global to use to start the app.

I am trying to find a way to load the Ember app through webpack as part of the parent build.

Look at Embroider it looks like the second step in that build is to generate a pure javascript version of the app and then the final step does a ‘traditional’ webpack build of it. My initial though is to capture the middle step and then load that as part of the parent app webpack. I’ve just started looking at Embroider though so not entirely sure if that would work and also not sure how to tell Webpack to bundle all of the Ember code since it doesn’t really have a traditional ‘entry point’.

Anyone tried to do this yet, or could give me some pointers where to start?

[miketervela]

For those interested, I saw an old post with some advice regarding this - looking into that advice now

Building Ember with Webpack via Embroider?

Hello! I’m attempting to build a ruby gem that adds Ember integration to the rails/webpacker system, so that Ember regains its status as a first-class citizen in the Rails ecosystem. Right now, Rails integration is indeed possible with the ember-cli-rails, but its less than ideal for a number of reasons. When I saw that Embroider was being developed to build Ember within a Webpack context, I was delighted, and inspired to begin work on this gem. However, as I dig through the projects, it appea…

[miketervela]

Update - currently stumped on importing my code into React.

Two problems actually:

1. Embroider’s stage 2 build my app.js is a list of defines to the rest of the app tree. I can’t get Webpack to include any of the dependencies written in app.js into the bundle/main.js. I assume that’s user error and will look more into Embroider’s webpack wrapper for that.

2. I try importing vendor.js and app.js into a react component but vendor.js doesn’t create window.define the way it should so app.js throws an exception. I’m not sure if this should even be possible but talking to NullVoxPopuli, importing vendor.js this way won’t work because import will defer for dependencies and just not run the way vendor.js is meant to.

For now I’m planning to load my embedded ember app via script tags like I already am but will spend a little time revisiting this now and then - would welcome any pointers.