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?
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>
<% } %>