hasanayan / craco-plugin-single-spa-application

Convert your CRA4 project into a single-spa application without ejecting and losing update support of react-scripts
MIT License
33 stars 17 forks source link

Hot Module Reload #9

Open a11rew opened 3 years ago

a11rew commented 3 years ago

I have a Single-SPA microfrontend converted from Create-React-App using this plugin. Everything works fine but hot reloading when developing. Changes in the microfrontend aren't effected until the page is refreshed. Both css and react changes. Tried with both the Single-SPA playground and a root config.

When running in the Playground, the websocket connection responsible for the reload as far as I can tell always fails with not much info to go off of;

image

The Single-SPA docs recommend the standalone single-spa webpack plugin for hot-reloading support when developing locally. The standalone plugin however requires an instance of the HTMLWebpackPlugin and adding that breaks the build because craco-plugin-single-spa-application adds the HTMLWebpackPlugin to the webpack.plugin.remove key in the craco config.

Anything I'm missing? Any help would be much appreciated

a11rew commented 3 years ago

Referencing #7, using hot loader did not help and we're on dev builds

felipeplets commented 2 years ago

Hey @a11rew is this still an active issue for you? I have a solution I can work for enabling a standalone version with this plugin, but I want to check if this is still relevant to your or other in the community to prioritize efforts.

a11rew commented 2 years ago

Hi @felipeplets no this is not an active issue for me I ended up switching out craco completely in my setup. I am sure others visiting this thread might find it useful however so by all means, share your solution

felipeplets commented 2 years ago

Hey @a11rew thank you for the update. The solution involves adding a configuration to run also a standalone mode, so basically adding an option to the plugin that will run the code standalone and make use of the hot reload. I need some time to write a PR for that, but probably can get it done in a few weeks, I will update this issue once I have something to share.

fupengl commented 2 years ago

You can integrate fastRefresh to see what version of react-scripts you are. If it is version 4, you need to integrate the client. For details, please refer to https://github.com/fupengl/react-app-rewired-single-spa

HJordan35 commented 2 years ago

Our team is potentially going to be converting ~6 apps to mfes using your plugin, and would love the option for a standalone mode for testing/local development as we have not had the chance to build/deploy a root-config yet. Once that root-config is built/distributed/hosted, I can see us no longer really using standalone - but having some way for us to simply run the apps without needing to hop into playground would be nice

Certainly not a deal-breaker though as the playground approach is so easy despite the hot-reload issue :)

HJordan35 commented 2 years ago

@felipeplets - bumping this thread as I would love your input on if this could be feasible. I am also happy to help with the PR if you want to DM me and provide me with some high-level points of what you are thinking to introduce this fix