Code Monkey home page Code Monkey logo

Comments (8)

joeldenning avatar joeldenning commented on June 2, 2024 1

I haven't tried single-spa-ember in a couple years. The last time I did so was with Ember CLI 3.12.0. You can see the source code for it at https://github.com/single-spa/single-spa-examples/tree/master/src/ember-app. What I remember from the experience was that Ember wasn't well suited at that time for single-spa, since it had strong assumptions in its compilation/bundling that didn't use industry norms like webpack and didn't really jive with the concept of in-browser javascript modules representing a microfrontend.

My guess here is that you're using a newer version of Ember that no longer works with single-spa-ember. If you have interest in helping revive the project, I'd be happy to guide you on diagnosing problems and making changes to single-spa-ember.

from single-spa-ember.

joeldenning avatar joeldenning commented on June 2, 2024 1

Thanks @rajasegar for your work and research into this.

We need a mount point for our ember app to render in the DOM something like

and we need to mention the same inside app.js inside our ember app like

👍 we should add this to the documentation for single-spa ember.

We need to use hash routing in Ember because if we use history or auto as locationType in Ember, it messes up our browser url and the routing system of single-spa. Also if we use history Ember will take over the routing system automatically with unintended side effects.

This is something that should be fixed. If you can provide more details about the issues caused by history routing, I'd be happy to help diagnose them.

It looks like single-spa is not able to initiate the ember app on-demand, so it makes sense to auto start the Ember app

I strongly disagree with this. The last time i tried single-spa-ember, I was able to get it to mount and unmount on demand. The entire point of single-spa applications is that they can be mounted and unmounted programmatically, on demand. If that is not happening, it's not single-spa. We should work on fixing this rather than accepting it.

from single-spa-ember.

genechan avatar genechan commented on June 2, 2024

If I set autoRun to true in my ember-cli-build.js I can see the ember quick start running but that's going against the instructions.

module.exports = function(defaults) { let app = new EmberApp(defaults, { autoRun: true, // Set autoRun to false, because we only want the ember app to render to the DOM when single-spa tells it to.

Outside of this example, in regards to the real ember application that I was trying to migrate, I enable autoRun to true but ran into this error
died in status LOADING_SOURCE_CODE: {"isTrusted":true}

I found a similar ticket and think it may be related or not.
single-spa/single-spa#251
I only have 1 ember app and wanted to create a react app while I migrate ember into it.

from single-spa-ember.

rajasegar avatar rajasegar commented on June 2, 2024

I have get it to a working stage with some changes here
https://github.com/rajasegar/single-spa-ember-bug
There was an issue with the port number, it was 8081 instead of 8080 in index.html for root-application.js
Some of the observations from the changes I have made:

Mount point in index.html for ember app

We need a mount point for our ember app to render in the DOM something like <div id="ember-app"></div> and we need to mention the same inside app.js inside our ember app like

rootElement = "#emberapp";

Use hash-based routing in Ember apps

We need to use hash routing in Ember because if we use history or auto as locationType in Ember, it messes up our browser url and the routing system of single-spa. Also if we use history Ember will take over the routing system automatically with unintended side effects.

Set autoRun to true

It looks like single-spa is not able to initiate the ember app on-demand, so it makes sense to auto start the Ember app

from single-spa-ember.

rajasegar avatar rajasegar commented on June 2, 2024

@joeldenning The autoRun: false option now works fine, once when call start() in the root-config. It was previously not there. Now I can able to mount/unmount the ember app using the inspector dynamically.
The latest changes were made in this commit here
rajasegar/single-spa-ember-bug@a9c7f23
Let me work on this more by adding and testing more ember apps or other framework apps and I will let you know any other observations here and possibly will raise a PR to update the docs for single-spa-ember.

from single-spa-ember.

joeldenning avatar joeldenning commented on June 2, 2024

Ah yes, calling singleSpa.start() is necessary. Good catch. Looking forward to any PRs from you improving support.

from single-spa-ember.

villander avatar villander commented on June 2, 2024

@joeldenning @rajasegar when I change the locationType to hash it works perfectly removing this shit error. Do you have some idea why it happens? If I use hash I can't access the nested routes, like payments.chargeback directly.

Why when we use hash we can't access child routes on the app?

from single-spa-ember.

rajasegar avatar rajasegar commented on June 2, 2024

@villander I think locationType is something specific to Ember, it doesn't have anything to do with single-spa
I have discussed some of these issues in this blog post
https://dev.to/rajasegar/ember-micro-frontends-with-single-spa-1p8j

from single-spa-ember.

Related Issues (10)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.