3

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.

José Luis
  • 1,816
  • 8
  • 24
  • 26
internethulk
  • 92
  • 2
  • 15
  • I don't know if your looking to inject HTML, dependencies or pure javascript. But hope this can give you some guidance: https://medium.com/nerd-for-tech/angular-11-insert-external-html-in-your-own-website-web-scraping-ff78f2540c4b – Rafael de Castro May 13 '21 at 19:33
  • 1
    No not really. I kinda need access to the project I guess. I need access to one lib and to show it correct I need the `.scss` of the scss directory. – internethulk May 14 '21 at 10:10
  • 1
    I don't think that will be possible, or at least that easy. Maybe you could turn your particular component into a npm repo, install it in both projects, and use it as a dependacy. So you will have one .scss file chared by both projects. If so, that may help: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e. Wish you luck buddy! o/ – Rafael de Castro May 14 '21 at 12:41
  • I can copy paste all the stuff but I don't think that it is a good way to do it. I can't load it via an iframe route because then I would need authentification and would have unnecessary data. Added some example links to my question. – internethulk May 14 '21 at 13:50
  • 1
    These examples both runs on Iframes. I just used the inspector to verify. I don't know if its possible to achieve the kind of integration you looking for... :( – Rafael de Castro May 14 '21 at 14:00

2 Answers2

3

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

yatinsingla
  • 434
  • 6
  • 13
  • Ok. I guess I understand that approach. But is it possible to have my main app (App-B in question) as a single application and the App-A with Angular FE and Node.js BE in there? – internethulk May 14 '21 at 15:24
  • So how we do is that we have created another app (App-C) in monorepo, which is backend Node.js application, which can be used for (App-A). – yatinsingla May 14 '21 at 20:41
  • @yatinsingla what if App-A is being developed by Team A under a different manager & App-B is being developed by Team B, & we are using microfrontends to combine both apps, in this case how do we share the libraries when two app are in two different repos. – VR1256 Jul 11 '22 at 13:43
3

you have three options

  1. git submodules (easier, support of branches for main project and component lib)

  2. npm publish (you can publish scss files as well within your npm package, no problem with that)

  3. a sub-kind of 2, but does not require publishing the package. you can configure package.json of main project to pull some dependencies from git, something like that:

    ... "dependencies": { "mylib": "github:andreo-k/venturo#master", ...

that will pull source code of component lib when you do npm install

Andrey
  • 1,752
  • 18
  • 17