Comments (8)
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.
Glad to hear that you got things working.
from single-spa-backbone.
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.
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.
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.
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:
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.
Yeah I'd recommend switching to only one webpack entrypoint. You can use import()
to do code splits.
from single-spa-backbone.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from single-spa-backbone.