Use environment variable inside importmap - single-spa

Question

I'm trying to use a environment variable inside the importmap that is used for single-spa configuration:

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@polyglot-mf/root-config": "//localhost:9000/polyglot-mf-root-config.js"
      }
    }
  </script>
  <% } %>

But I want to manage the //localhost:9000/polyglot-mf-root-config.js inside an environment variable, so, I want something like:

   <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@polyglot-mf/root-config": process.env.URL_ROOT
      }
    }
  </script>
  <% } %>

I've tried to achieve this using process.env directly and declaring a variable before and using it inside the import:

<script type="systemjs-importmap">

    let urlRoot = process.env.URL_ROOT
  
    {
      "imports": {
        "@polyglot-mf/root-config"  : urlRoot ,
      }
    }
  </script>

But that doesn't work, this throws an error that process is not defined.

Any idea about how I can make it work?

Answer 1

What I did was send the environment variables when I start the microfrontend.

So, my npm start script is:

webpack serve --env isLocal --env URL_ROOT="//localhost:9000/polyglot-mf-root-config.js"

Later, I have to modify my webpack.config.js for add the environment variable:

return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    plugins: [
      new HtmlWebpackPlugin({
        inject: false,
        template: "src/index.ejs",
        templateParameters: {
          isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
          URL_ROOT: webpackConfigEnv && webpackConfigEnv.URL_ROOT,
        }
      })
    ],
    externals: ["single-spa", "react", "react-dom", /^@SE\/.+$/]
  });

And finally I can use the environment variable inside my .ejs file:

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@polyglot-mf/root-config": "<%= URL_ROOT %>"
      }
    }
  </script>
  <% } %>