[React - Module Federation setup] baseHref only applies to "serve" target but not "serve-static" target

[eddeee888]

Current Behavior

Hello, I’m using Nx@14.1.4 and React MFE.

I have a problem where baseHref works when running serve ( using @nrwl/react:module-federation-dev-server ) but not serve-static ( using @nrwl/web:file-server). Here’s an excerpt of my remote config:

{
    "sourceRoot": "apps/mfeapp1/src",
    "projectType": "application",
    "targets": {
        "build": {
            "executor": "@nrwl/web:webpack",
            "outputs": ["{options.outputPath}"],
            "defaultConfiguration": "production",
            "options": {
                // ...other generated config
                "outputPath": "dist/apps/mfeapp1",
                "baseHref": "/experiment-mfe/mfeapp1/__dev/", // This is my custom baseHref
            },
            "configurations": {
                // ...other generated config
            }
        },
        "serve": {
            "executor": "@nrwl/react:module-federation-dev-server",
            "defaultConfiguration": "development",
            "options": {
                "buildTarget": "mfeapp1:build",
                "hmr": true,
                "port": 4401
            },
            "configurations": {
                "development": {
                    "buildTarget": "mfeapp1:build:development"
                },
                "production": {
                    "buildTarget": "mfeapp1:build:production",
                    "hmr": false
                }
            }
        },
        "serve-static": {
            "executor": "@nrwl/web:file-server",
            "defaultConfiguration": "development",
            "options": {
                "buildTarget": "mfeapp1:build",
                "port": 4401
            },
            "configurations": {
                "development": {
                    "buildTarget": "mfeapp1:build:development"
                },
                "production": {
                    "buildTarget": "mfeapp1:build:production"
                }
            }
        }
    },
}

When I run nx serve mfeapp1, the assets get served at baseHref e.g localhost:4401/experiment-mfe/mfeapp1/__dev/remoteEntry.js
However, when I run nx serve-static mfeapp1 , the assets get served at root e.g. localhost:4401/remoteEntry.js

The problem is that serve-static only serves files statically at the output folder, but ignores baseHref.

---

This is a problem that extends to running MFE host apps as well. With the same config above, and the following Webpack config:

// Host webpack config
module.exports = withModuleFederation({
    ...moduleFederationConfig,
    remotes: [['mfeapp1', '//localhost:4401/experiment-mfe/mfeapp1/__dev/remoteEntry.js']],
})

Here are the results:

$ nx serve mfehost --devRemotes=mfeapp1 // Works because webpack server serves remoteEntry at localhost:4401/experiment-mfe/mfeapp1/__dev/remoteEntry.js
$ nx serve mfehost // Does not work because http-server serves remoteEntry at localhost:4401/remoteEntry.js

Expected Behavior

The bundled files are served at the same URL consistently, driven by baseHref, regardless of the underlying executor.

Why is this a problem?

In my case, I have a reverse-proxy that puts both MFE host and app on a custom domain. So instead of using port number to send traffic to the right place, I have to use URL path.

Steps to Reproduce

1. Create a new Nx workspace
2. Create an MFE host with MFE apps(s): npx nx generate @nrwl/react:host mfehost --standaloneConfig --remotes="mfeapp1" --no-interactive
3. Change MFE app baseHref path e.g. /experiment-mfe/mfeapp1/__dev/
4. Run nx serve mfeapp1, remoteEntry is served at localhost:4201/experiment-mfe/mfeapp1/__dev/remoteEntry.js
5. Run nx serve-static mfeapp1, remoteEntry is served at localhost:4201/remoteEntry.js

Environment

>  NX   Report complete - copy this into the issue template

   Node : 14.18.1
   OS   : darwin x64
   npm  : 6.14.15

   nx : 14.1.4
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.1.4
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.1.4
   @nrwl/eslint-plugin-nx : 14.1.4
   @nrwl/express : Not Found
   @nrwl/jest : 14.1.4
   @nrwl/js : 14.1.4
   @nrwl/linter : 14.1.4
   @nrwl/nest : Not Found
   @nrwl/next : 14.1.4
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.1.4
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.4
   @nrwl/web : 14.1.4
   @nrwl/workspace : 14.1.4
   typescript : 4.6.2
   rxjs : 6.5.2
   ---------------------------------------
   Community plugins:

[ndcunningham]

Hey! thanks for reporting this!
It does look like this is an actual enhancement to http-server
There was a feature/issue filed http-party/http-server#595 asking for a feature like what you were asking.

The best approach to this is to/wait for a PR on http-server's repo.

Currently, for your case, a short-term solution is to use some sort of reverse proxy server like Nginx

[eddeee888]

Gotcha, thanks @ndcunningham ! I thought baseHref works for both modes ( dev vs static ) but since they use different servers ( Webpack vs http-server ), it won't work.

Do you think there would be something in the future that Nx could implement to gap nuances like this? 🙂

[ndcunningham]

I can see the use case for this feature.
It would be easy to absorb this if this enhancement was applied to http-server repo.

[MaximSagan]

I don't think anything is happening on the http-server side. The issue @ndcunningham linked above was closed in favor of a more generic issue that has been open since 2015, http-party/http-server#139.

Is there anything that we can do on our side? Maybe move the static files to a new directory before serving them?

[Galileon-venta]

Any update on this would be awesome! I've seen @MaximSagan has added http-party/http-server#837 , but it was not merged for about half a year now D;

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.