Search code examples
javascriptreactjsmicro-frontend

Micro front env config in react

Hi I am working on micro front react app. It has 4 micro front ends. - Home, Account, Product Page, Cart & Check Out.

There is container app which will have routing of these micro front ends.

Where I should keep env files ? Should I keep it in container app only or in each micro front end.

Solution

  • The problems with defining it in 1 place are(to name a few):

    • How do you share these exactly? We don't want the different MFEs "reaching" into one another as this breaks the very thing we are trying to create - separation and independence.
    • We can't run a MFE independently if we rely on the container to supply/propagate some env values (or we couple them all to the env source).

    Defining it in each MFE brings a different issue - you'll need to update common values in god-knows how many places (and maybe even the same parameters were given different names oh nooo)

    Here comes... trumpets.... secret option #3:
    Define a .env.common file in the top directory and a .env.prod | .env.dev for each MFE (or any convention you like to use)

    Just to address your specific question about the container app - you should rely on it as little as possible; try to treat it like any other MFE (would you let Cart/Products/Home handle the env settings for the whole app?). So even if container hosts some other MFEs that doesn't mean it makes sense to let it set/manage their environments - one example for why that is wrong - what if your MFE is consumed by one/many other MFEs? Should they now also manage the env for their consumed MFEs? (of-course not)

    Then you can use whatever technique/implementation you like in order to manage the environment (ie dotenv & dotenv-expand). Also check out React env docs they are very handy & straightforward.

    Idea: You can define and/or use some of the values directly in your webpack config - check this out

    This article explains this example well, the code has a naive implementation for an env in each MFE which you can use as part of your solution (I assume the writer didn't bother about the env best practice because it's not what the article is about and there is a lot to cover anyway).