Micro frontend monorepo with SingleSPA and SystemJS loading

Support
, ,
1

Hi everyone!

I’m building an application, using a micro frontend approach, inside a monorepo using SingleSPA and lazy loading the bundles with SystemJS.

When I put this snippet into the index.html it works locally, because I’m serving each micro-frontend in a specific port. In this case for example, the root is served on 4200 and the “child” module is on 8001.

<script type="systemjs-importmap">
   {
     "imports": {
       "@organization/my-module": "http://localhost:8001/my-module/index.singlespa.js",
       "@organization/root": "/index.root.js"
    }
  }
</script>

When I deploy it, it tries to access the localhost on my machine. I tried changing it to http://my-module.com/my-module/index.singlespa.js, but what I get back is just my index.html, so the bundle loading fails.

I’m considering this simple example as a start to build an application with many co-existent applications, first creating them internally as monorepos and then, as our teams grows, extracting some of them to our private repo.

Any ideas to solve this?

2

You can’t access other ports in production. I’m not sure why you are doing it that way locally, but everything is served from the default port on our CDN, as is the case with other CDN providers. Also it’ll load from your local machine if you have a localhost URL in your code. If the bundle is deployed then you should be able to access it just as you do any other file that’s in your deploy. Can you clarify why you are using multiple ports here? Also, what’s the real code you’re using in production and what are the real URL’s for your site(s)?

3

Hi @futuregerald!

Thanks for your support. We solved it by proxying the paths to localhost via webpack for devServer.

In production then we just set the bundle to proxy the paths to the real deployed urls, depending on the environment (production, staging).

4

Glad you solved it, let us know if you have any other question.

1 Like