Run apps/parcels in standalone mode

[tsvecak]

Describe the bug or question
I've managed to set up my app and have my parcels(apps) running no problem within main root app.
However I can't find a way how to work inside of parcel independently?
Main reason for us using this approach is to be able to independently develop apps that we can than import into one or multiple apps at the end. Is this something we can do within parcels? Should we have root component in each of our repos to be able to spin parcels locally without the need of running main app?

[joeldenning]

This is possible, but generally not supported or encouraged since it's difficult to set it up in a way where cross-microfrontend imports work properly. However, to do so the approach is just to create an HTML file inside of each microfrontend that mimics what the root config does (setting up systemjs, an import map, etc) is to call the mount function manually, which causes it to mount to the dom.

Another thing to note - in recent weeks I've been considering creating a webpack plugin that would help with this. After talking with the single-spa core team about it, some expressed concern that doing this will just result in more confusion than help, since people will expect the standalone version of an app to work the same as a non-standalone version, which will never be the case.

[tsvecak]

I do see why we'd not encourage that approach. However considering that we want to encourage separate and isolated developments it seems contradictory to preach that while not making it possible to run each app independently and actually offer independent developments(because you heavily depend on root app).

I would be interested to see such webpack plugin - it can be something buried in the docs or not even mentioned in the docs as I am pretty sure a lot of developers would love that option to develop in complete isolation and just plugging their app into main root app.

[joeldenning]

I do see why we'd not encourage that approach. However considering that we want to encourage separate and isolated developments it seems contradictory to preach that while not making it possible to run each app independently and actually offer independent developments(because you heavily depend on root app).

Standalone mode will always allow for the possibility of "works on my machine, but not on the deployed environment." Using import-map-overrides will never result in that.

As someone who answers dozens of single-spa questions per day, I don't like the idea of giving people something to complain about. If we encouraged standalone mode, I expect there to be a regular stream of complaints about how things work in standalone mode, but not when integrated. I already have enough people asking me the same question over and over again, with people often feeling entitled to my time and blaming me for when their code is not working. So the idea of intentionally telling people to go down a path that will likely result in further complaints is something I have been wary of :)

With that said, here's a branch I put together that shows how it can be done. See the webpack.config.js for the changes. Note that I put this together in an hour and it is not polished.

https://github.com/react-microfrontends/people/tree/experimental-standalone

I've also created a repository for the generic webpack plugin to go into, although I haven't implemented it yet. The hard coded version in the experimental-standalone branch is the only thing I've done so far. If you'd like to collaborate on implementing the plugin, I'd be interested in that. The goal would be to take the hard coded approach above and make it configurable.

https://github.com/single-spa/standalone-single-spa-webpack-plugin

[tsvecak]

Great stuff! :) As I said I understand the concerns behind people being people. Thanks for sharing the bexamples! 👍

[joeldenning]

I've published the initial version of the reusable webpack plugin. You can see the documentation for it at https://github.com/single-spa/standalone-single-spa-webpack-plugin