Access to another angular project

Question

I'm developing an app which enables users to theme the application to their preferences. (named App-A for better understanding)

I need to have access to certain parts of App-B, which is the main application. I want to show a preview of a part of that so users can see their changes immediately. How can I achieve that? Both applications are in their own repository right now and I don't think the best way is to put them in one repository if the App-A will have a backend and a little frontend.

I was thinking about just copy and past the needed parts but I would prefer not to. I need access to the .scss files and one part for the preview (two modules).

The structure of App-B looks kinda like this:

|app
 |---src
  |---scss
|libs
 |
 |---libA
 |---libB
 |---...

I need access to the scss directory and to the libs.

In the end the goal is that both apps will be on the same server, right now it is local. I don't want and need access to the whole app.

EDIT: I want to achieve something similiar to this: https://materialtheme.arcsine.dev/ or https://devexpress.github.io/ThemeBuilder/master/material/blue-light

Where the 'Sample Application' or 'Theme Preview' on the right side is the content of App-B.

Answer 1

You need a monorepo structure in which you can have multiple projects and common library to be used within multiple project. The common part you want to use in both projects can be created in library which can be a component, service, interface etc. We are doing same in our application, we have 6 projects using same libraries. plus you can host them as a single project.

Below is the sample on how to set monorepo. It using NX which is very powerful to maintain monorepo (must recommened). Look at it if it makes sense and let me know if you need more info.

https://medium.com/ngconf/angular-architecture-matters-monorepo-df110b2a508a