Modern serve does not seem to correctly serve the built /dist directory - cannot successfully deploy

[Billybobchops]

Hi all!

I could use really some help. I have been running into a wall for weeks now trying to figure out this issue. Ultimately, what I am trying to achieve is to be able to deploy my remote modern.js application to Netlify so that my deployed host application can consume the exposed federated components from the remote. I am following the documentation here: https://modernjs.dev/en/guides/basic-features/deploy.html#pure-front-end-project

remote application: https://github.com/Billybobchops/design-system-mdrn
host application: https://github.com/Billybobchops/payer-portal-mdrn

I am able to run modern dev for both repositories just fine and everything works locally that way - the host consumes the remote. I can successfully navigate to http://localhost:3001/mf-manifest.json. However the issue arises when I run modern build and modern serve.

When running modern build I see all of the correct assets in the dist folder:

When serving it with the following in my modern.config.ts file:

server: { ssr: { forceCSR: true, }, },

I can see the remote components in the remote app but they're missing JavaScript behavior and I still get a 404 trying to access /mf-manifest.json also I only see the static directory and even that seems to be missing a lot of assets (localhost:8080):

Compared to how much is in the built dist directory:

When I remove forceCSR: true from the config and run modern serve then I get an entirely blank page.

I need https://starling-ui-design-system.netlify.app/mf-manifest.json to not 404 and all of the necessary assets remain in the dist folder upon deployment. I'd really like to use modern.js since the creator of module federation highly recommends it as a compatible framework. Maybe I am forgetting something basic here in relation to SSR. Lastly, for context, we do not want to use SSR at the moment.

Appreciate any help you can offer, thanks!!!

[zllkjc]

Thanks for the feedback, there seems to be a deployment bug here. The JSON file was not correctly put into the dist directory. We will fix this in the next release. @2heal1 @yimingjfe cc~

Another question is SSR. In Modern.js, there is no need to configure "disable SSR". By default, SSR will not be enabled. Just remove the server.ssr configuration in modern.config.ts.

[Billybobchops]

Thank you for getting back to me so quickly! I really appreciate it.

I will go ahead and remove the "disable SSR" configuration. Just curious, with deployment being more of a core function, has this specific bug surfaced yet before?

I was also wondering if you have any insight on when the next release might be expected. Again, thank you for your work!

[zllkjc]

Hey, we talk about this issue. It may not be a bug, but rather a case where our documentation and examples only considered the development environment.

For production deployment, we recommend placing the module federation files in the static directory, including both the manifest and remoteEntry.js. I have already updated the Demo and documentation #6926.

For security considerations, Modern.js will only copy the dist/static directory to the deployment artifacts. However, in previous demos, the module federation's manifest and remoteEntry.js were built into the dist/ directory, causing these files to be lost after deployment.

And Modern.js serve command also serve files in static/ dir only, so serve command can't access mf-manifest.json.

You might wonder why these files are accessible during the development stage. This is because in the current Modern.js development environment, all resources built by the bundler are hosted by rsbuild devMiddleware. We consider this reasonable because in production environments, developers may not necessarily use Modern.js's server to host static files, these files can also be uploaded to a CDN.

In this case, the static files accessible in the development environment can also be accessed in production.

more info can be refer to #6924