What can I do in my React microfrontend project so that I do not need to "npm start" for every dependent microproject

Anshuman 0
Viewed 32

So, I am new to microfronteds. I have built a microfrontend project watching tutorials. This is the structure.

demo
  |--container
  |--app1
  |--app2
  |--app3

container, app1, app2 and app3 are microfrontend projects and works fine independently and also after integrating. container app is to bring together app1, app2 and app3 and switch between them using routes.

The problem is that when I want to see container output with app1,app2,app3. I have to first "npm start" all those projects and then do the same for container. Is there a way that I have to use "npm start" only once. Note: I have researched a bit myself too but I don't want to use readymade stuffs like nx, lerna, bit etc. Something only react or node based is preferable. Also if possible give only hints/resources and not whole solution.

micro-frontend monorepo reactjs
1 Answers

You can write a custom node script like this:

import child_process from 'child_process';
import util from 'util';
const spawn = util.promisify(child_process.spawn);

const startApp = (app) =>
    spawn('npm', ['start'], {
        env: { ...process.env },
        cwd: app,
        stdio: 'inherit',
    });

await Promise.all([
    startApp('container'),
    startApp('app1'),
    startApp('app2'),
    startApp('app3'),
]);

Only native NodeJS dependencies are used above. Since ESM is used above, make sure to name it with an ".mjs" extension. Will not work with an outdated NodeJS version. E.g. start-all.mjs.

If you placed it one level above all apps, i.e. in your "demo" directory then you can run it using node start-all.mjs and all starting in parallel and are running.

Viktor Luft0
Related