Coder Social home page Coder Social logo

Comments (8)

joeldenning avatar joeldenning commented on August 18, 2024 1

Hi @jualoppaz, one thing you'll need to do when migrating from single-spa is free the html file from webpack. The reason is that each single-spa application has its own webpack config, but there is only one html file that all of them share. See related https://single-spa.js.org/docs/configuration and http://single-spa-playground.org/playground/html-file.

Another thing to think about is how to implement the single-spa activity functions. For this, I recommend using the recommended setup which includes SystemJS. Once you do that, the code you've pasted above should work great!

from single-spa-backbone.

joeldenning avatar joeldenning commented on August 18, 2024 1

Glad to hear that you got things working.

from single-spa-backbone.

jualoppaz avatar jualoppaz commented on August 18, 2024

Hi @joeldenning !

In my case I was injecting several scripts twice due to initial Webpack config. After reading your comment, I only had to disable automatic Webpack scripts import with HtmlWebpackPlugin and import the needed scripts manually.

An example of this portion of code would be the next:

...,
plugins: [
    new HtmlWebpackPlugin({
      title: 'App title',
      baseUri: '/',
      template: path.resolve(__dirname, 'src/index.html'),
      inject: false
    }),
  ],
...

Thank you so much for your help!

from single-spa-backbone.

jualoppaz avatar jualoppaz commented on August 18, 2024

Hi again @joeldenning !

Although my app is working using standard imports for config the singleSpaEntry file for each registered application, I am researching about SystemJS.import in order to split my application and upgrade my monolithic strategy (option 1) to NPM packages strategy (option 2) and why not adopt in the future the dynamic module strategy (option 3).

In order to starting the upgrade to Option number 2 I'm doing experiments with the repo https://gitlab.com/TheMcMurder/single-spa-portal-example but I have several doubts.

  • Is it possible to use SystemJS for load NPM packages as same time loading application files?

  • If I set the libraryTarget webpack option to amd my Backbone app is not fired although the script tag is correctly added by single-spa. I tried to use system value after upgrading my webpack version to 4.30.0 but I have the same problem. Do I have to perform any special configuration to get firing my backbone main bundled file like IIFE?

Thank you so much.

from single-spa-backbone.

joeldenning avatar joeldenning commented on August 18, 2024

Is it possible to use SystemJS for load NPM packages as same time loading application files?

Are you asking if you can have shared npm dependencies for your packages? Yes, you can! See https://single-spa.js.org/docs/faq/#can-i-have-only-one-version-of-react-vue-angular-etc-loaded

If I set the libraryTarget webpack option to amd my Backbone app is not fired although the script tag is correctly added by single-spa. I tried to use system value after upgrading my webpack version to 4.30.0 but I have the same problem. Do I have to perform any special configuration to get firing my backbone main bundled file like IIFE?

If you're using SystemJS, I'd recommend setting output.libraryTarget to 'system'. See https://webpack.js.org/configuration/output/#module-definition-systems. Doing so might help

from single-spa-backbone.

jualoppaz avatar jualoppaz commented on August 18, 2024

I think the problem is in my entry property in my webpack config.

My current configuration is the next

webpack.config.js

module.exports = {
    ...,
    entry {
        main: ['babel-polyfill', './single-spa-applications.js'],
        'backbone-app': ['./backbone/index.js'],
        'backbone-sspa': ['./backbone/singleSpaEntry.js']
    }
}

The main.bundle.js would be the root-application, the backbone.app.bundle will be my Backbone app and the backbone-sspa.bundle.js will have only the singleSpaBackbone configuration.

index.html

...
<body>
        <script type="systemjs-importmap">
          {
            "imports": {
              "@app/main": "./main.bundle.js",
              "@app/backbone-app": "./backbone-sspa.bundle.js",
              "@app/vue-app": "../node_modules/vue-app/dist/js/app"
            }
          }
        </script>
        <script src='https://unpkg.com/[email protected]/dist/system.js'></script>
        <script src='https://unpkg.com/[email protected]/dist/extras/amd.js'></script>
        <script src='https://unpkg.com/[email protected]/dist/extras/named-exports.js'></script>
        <script src='https://unpkg.com/[email protected]/dist/extras/use-default.js'></script>
        <script>
          System.import("@app/main")
        </script>
        <div id="app-placeholder"></div>
    </body>

single-spa-applications.js

singleSpa.registerApplication('backbone', () => System.import('@app/backbone-app'), () => true);
singleSpa.registerApplication('vue', () => System.import('@app/vue-app'), showWhen(['/vue-route']));

singleSpaEntry.js

import singleSpaBackbone from '@emtecinc/single-spa-backbone';

const backBoneLifecycles = singleSpaBackbone({
	BasePath: './',
	App:
	{
    AppPath: 'backbone-app.bundle.js',
	},
	DomElementSetter: domElementSetter
});

export const bootstrap = [
  backBoneLifecycles.bootstrap,
];

export const mount = [
  backBoneLifecycles.mount,
];

export const unmount = [
  backBoneLifecycles.unmount,
];


function domElementSetter() {
    //use the same element to render into in the backbone app
    let el = document.getElementById('app-placeholder');
    if (!el) {
	el = window.document.createElement('div');
	el.id = 'app-placeholder';
	document.body.appendChild(el);
    }
}

I think that SystemJS can't relate backbone-app.bundle.js from backbone-sspa.bundle.js. If I merge that files removing the last entry, I can see my app working with SystemJS.

Now the files would be like follows:

webpack.config.js

module.exports = {
    ...,
    entry {
        main: ['babel-polyfill', './single-spa-applications.js'],
        'backbone-app': ['./backbone/index.js']
    }
}

index.html

...
<body>
        <script type="systemjs-importmap">
          {
            "imports": {
              "@app/main": "./main.bundle.js",
              "@app/backbone-app": "./backbone-app.bundle.js",
              "@app/vue-app": "../node_modules/vue-app/dist/js/app"
            }
          }
        </script>
        <script src='https://unpkg.com/[email protected]/dist/system.js'></script>
        <script src='https://unpkg.com/[email protected]/dist/extras/amd.js'></script>
        <script src='https://unpkg.com/[email protected]/dist/extras/named-exports.js'></script>
        <script src='https://unpkg.com/[email protected]/dist/extras/use-default.js'></script>
        <script>
          System.import("@app/main")
        </script>
        <div id="app-placeholder"></div>
    </body>

However, it seems that singleSpaBackbone is fired twice and the second attempt is not valid. This is the produced error:

error navegador pero arranca

error bootstrap, mount y unmount

It's normal that this error occurs because I am using twice the backbone-app.bundle.js file in the process: as singleSpaBackbone appPath and as loadingFunctions parameter of registerApplication singleSpa method.

The reason for have two entries is that I am mixing the root-application repo with the backbone-repo by the moment.

  • Is problematic that I have more than one entry?
  • Can I say to SystemJS how to relate the generated bundles?

Thank you so much.

from single-spa-backbone.

joeldenning avatar joeldenning commented on August 18, 2024

Yeah I'd recommend switching to only one webpack entrypoint. You can use import() to do code splits.

from single-spa-backbone.

jualoppaz avatar jualoppaz commented on August 18, 2024

Ok @joeldenning . I changed again my System.import calls by import by the moment and it's working.

I'll try to use System.import when I could split my apps with only one entry per repository.

Thank you so much!!

from single-spa-backbone.

Related Issues (3)

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.