<p>I am trying to build a series of Micro-Frontends using Webpack 5 and the <strong>ModuleFederationPlugin</strong>.</p>
<p>In the webpack config of my container app I have to configure how the container is going to reach out to the other microfrontends so I can make use of those micro-frontends.</p>
<p>This all works fine when I am serving locally, not using Docker and Kubernetes and my Ingress Controller.</p>
<p>However because I am using Kubernetes and an Ingress Controller, I am unsure what the <strong>remote host</strong> would be.</p>
<p><a href="https://github.com/CodeNameNinja/Micro-Service-Ticketing" rel="nofollow noreferrer">Link to Repo</a></p>
<p>Here is my container webpack.dev.js file</p>
<pre class="lang-js prettyprint-override"><code>const { merge } = require(&quot;webpack-merge&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const ModuleFederationPlugin = require(&quot;webpack/lib/container/ModuleFederationPlugin&quot;);
const commonConfig = require(&quot;./webpack.common&quot;);
const packageJson = require(&quot;../package.json&quot;);

const devConfig = {
  mode: &quot;development&quot;,
  devServer: {
    host: &quot;0.0.0.0&quot;,
    port: 8080,
    historyApiFallback: {
      index: &quot;index.html&quot;,
    },
    compress: true,
    disableHostCheck: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: &quot;container&quot;,
      remotes: {
        marketing:
          &quot;marketing@https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js&quot;,
      },
      shared: packageJson.dependencies,
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);


</code></pre>
<p>and here is my <strong>Ingress Config</strong></p>
<pre class="lang-yaml prettyprint-override"><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: &quot;true&quot;
spec:
  rules:
    - host: ticketing.dev
      http:
        paths:
          - path: /api/users/?(.*)
            pathType: Prefix
            backend:
              service:
                name: auth-srv
                port:
                  number: 3000
          - path: /marketing?(.*)
            pathType: Prefix
            backend:
              service:
                name: marketing-srv
                port:
                  number: 8081
          - path: /?(.*)
            pathType: Prefix
            backend:
              service:
                name: container-srv
                port:
                  number: 8080

</code></pre>
<p>and here is my marketing webpack.dev.js file</p>
<pre class="lang-js prettyprint-override"><code>const { merge } = require(&quot;webpack-merge&quot;);
const ModuleFederationPlugin = require(&quot;webpack/lib/container/ModuleFederationPlugin&quot;);
const commonConfig = require(&quot;./webpack.common&quot;);
const packageJson = require(&quot;../package.json&quot;);

const devConfig = {
  mode: &quot;development&quot;,
  devServer: {
    host: &quot;0.0.0.0&quot;,
    port: 8081,
    historyApiFallback: {
      index: &quot;index.html&quot;,
    },
    compress: true,
    disableHostCheck: true, // That solved it
  },
  plugins: [
    new ModuleFederationPlugin({
      name: &quot;marketing&quot;,
      filename: &quot;remoteEntry.js&quot;,
      exposes: {
        &quot;./core&quot;: &quot;./src/bootstrap&quot;,
      },
      shared: packageJson.dependencies,
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);
</code></pre>
<p>I am totally stumped as to what the remote host would be to reach out to my marketing micro-frontend</p>
<p>serving it as usual without running it in a docker container or kubernetes cluster, the remote host would be</p>
<p><code>https://localhost:8081/remoteEntry.js</code></p>
<p>but that doesn't work in a kubernetes cluster</p>
<p>I tried using the ingress controller and namespace, but that too, does not work</p>
<p><code>https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js</code></p>
<p>This is the error I get
<a href="https://i.stack.imgur.com/HrPID.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HrPID.png" alt="enter image description here" /></a></p>

Mitchell Yuen
<blockquote>
<p><a href="https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js" rel="nofollow noreferrer">https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js</a></p>
</blockquote>
<p>If your client and the node are on the same network (eg. can ping each other), do <code>kubectl get service ingress-nginx --namespace ingress-nginx</code> and take note of the nodePort# (TYPE=NodePort, PORT(S) 443:&lt;nodePort#&gt;/TCP). Your remote entry will be <code>https://&lt;any of the worker node IP&gt;:&lt;nodePort#&gt;/remoteEntry.js</code></p>
<p>If you client is on the Internet and your worker node has public IP, your remote entry will be <code>https://&lt;public IP of the worker node&gt;:&lt;nodePort#&gt;/remoteEntry.js</code></p>
<p>If you client is on the Internet and your worker node doesn't have public IP, you need to expose your ingress-nginx service with <code>LoadBalancer</code>. Do <code>kubectl get service ingress-nginx --namespace ingress-nginx</code> and take note of the <code>EXTERNAL IP</code>. Your remote entry become <code>https://&lt;EXTERNAL IP&gt;/remoteEntry.js</code></p>
