Run consumer app without running provider app

[dominicarrojado]

Hi, is there a way to run the consumer app (standalone) without running the provider app locally?

I'm getting Uncaught Error: Cannot find module 'provider' if the provider app is not running locally.

[YanPes]

You can use the ErrorLoadRemote hook to manipulate the payload based on the lifecycle of your module federation connection.
https://module-federation.io/blog/error-load-remote.html#errorloadremote-hook

With this you can tap into the args.afterResolve step to intercept a 503 response of the mf-manifest.json http call.

Just render some placeholder or an empty container based on your needs to prevent the application from crashing.

Let me know if this resolved your issue. :-)

[YanPes]

Is it possible to provide the repo on github somehow so I could investigate on the setup?
Also, let me know if the runtime plugin or CI/CD approaches resolve your issue with environments.

[dominicarrojado]

@YanPes I edited my message about regarding the repo. 🙏🏻 thanks for checking. Sure will let you know

[YanPes]

So with your example above you could also just use the retryPlugin (https://module-federation.io/plugin/plugins/retry-plugin.html) to refetch the remote content from another remote location.
Something like this:

// ./src/runtime-plugin/retry.ts
import { RetryPlugin } from '@module-federation/retry-plugin';
const retryPlugin = () => RetryPlugin({
    fetch: {
        url: "your-fallback-manifest-url",
    },
    script: {}
})
export default retryPlugin;

The errorLoadRemote hook is used to actually inject a different response payload before resolving the Javascript on consumer side. The set remoteUrl can stay the same and does not have to be changed. It works like a network Intercepter

[dominicarrojado]

@YanPes hmm but I actually don't want/need to get from another remote location. Just wanted to run my consumer app without running the provider app for local dev. Since this is more of just resolving my local dev, I will just proceed with a hardcoded backupUrl which points to the same localhost for now. 🙏🏻 Will just not expose the manifest on prod. Thanks for the help!

[YanPes]

Ok - Understood. For me personally it is just easier to create the ErrorLoadRemote handling to be more resilient against incoming broken payload. It is a general strategy to counteract potential issues. Similar to what you would do with React.ErrorBoundaries and Suspense. The nice benefit of ErrorLoadRemote is that it works all the time so you do not need to think about an alternative solution for other environments.

So if you do not want to run your provider app locally, just don't start it. The mf-manifest.json HTTP call will naturally return a 503 server error since the consumer cannot resolve the files from a non existing server. Therefore, a fallback UI will be rendered what you would want in production as well to ensure a proper UX and Usability with a stable runtime without errors. :-).

Hope I could help!