Create two Reactjs apps in the same project by sharing node_modules

Question

I am creating a project that has two Apps, one for administrative area and other for the user.

Inside the project has the /admin and /user routes, everything works correctly, in the /src folder has a Components folder that I share between the two areas.

When I build to publish the project, it creates the files that on average becomes 5MB, if i remove all administrative area and build again the size drops to 2MB.

It is possible to build in some way the separate areas?

Because if I do so admin will get 3MB and user will get 2MB and consequently they will load faster but, I would not want to miss sharing the components of the same project.

Today I work on other projects similar to this creating two separate apps, but when it comes to sharing the components that are the same, it is difficult to copy everything again to update.

I use the create-React-app

Answer 1

Let me talk about my experience in a similar project.

Here we needed to create several modules using a similar extrusion, we had (5 modules), but I will simplify here for your example.

Core(is who contained everything from the framework)

Admin(has only the components and routes and business rules in the idea of plugins)

User(Had only the components and routes , in the idea of plugins)

I think you have to think about sharing your components as plugins React and make available functions that contain the routes for you to register in your core.

One tool that really helped us do that was the Lerna(monorepo tool for js)