How to add base url dynamically in single-spa-router in react app

Question

We are using Single Spa Micro Front end for our react app to load the pages from multiple front ends. I would like to load a base URL from an env variable in microfrontend-layout.html

Our microfrontend-layout.html looks like this.

<single-spa-router base="@basePath"> 
  <main style="display: flex; justify-content: center;">
    <route default>
      <h1>404 route not defined</h1>
    </route>

    <route path="/login">
          <application  name="@login"></application>
    </route>

    <route path="/dashboard">
          <application  name="@dashboard"></application>
    </route>
</main>
</single-spa-router>

And our index.ejs import looks like this.

<% if (isLocal) { %>
    <script type="systemjs-importmap">
      {
        "imports": {
            
            "@root-config": "HTTP://someurl",
            "@login": "someurl",
            "@dasboard": "someurl",
            "@basePath": ''
        }
    }
    </script>
    <% } %>

Now, I want to add a base URL dynamically. So I tried to add that in an imports of index.ejs and read it in the HTML file which is not working.

My requirement is reading a value from an environment .env file and assigning that to the base attribute in microfrontend-layout.html. Since I cannot read the environment variable in the HTML file, I thought of reading that from the index.ejs file.

Please guide me on the right way to achieve this.

You probably need to configure a proxy in your React app. using that you can for example forward any http route that starts with "/api/**" to another address (ex. localhost:5252/api/**) — IP.AF
– IP.AF, Commented Nov 18, 2023 at 19:46
You can implement a proxy in react by following this answer http proxy middleware — IP.AF
– IP.AF, Commented Nov 18, 2023 at 19:48

Plamen Yordanov · Accepted Answer · 2025-09-19 08:32:03Z

0

If anyone is encountering this issue, I made it work with the following steps

Convert the microfrontend-layout.html file to JSON. You can see the syntax for that here
Routes are constructed, when calling constructRoutes from single-spa. In our case, we have the context information set in our index.html file in a base element inside head. I simply got the value from there and called microfrontendLayoutJson.base = myContextValue
Call constructRoutes

Hope this helps

answered Sep 19 at 8:32

Plamen Yordanov

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add base url dynamically in single-spa-router in react app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related