Nativescript: Monorepo support

[kamilchlebek]

Do you have any clue how should I configure nativescript to be used inside monorepository along with other applications?

The main issue I've encountered is that NS requires me to setup package ID inside root package.json. This will work for one NS application, but how can I add another one?

Apart from that, I'm still struggling with webpack.config.js which is expected to be in the project root. I'd like to place it inside nested directory to avoid polluting root directory. It is possible to provide custom path for webpack.config.js ?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[bradmartin]

We have some very specific apps with specific webpack needs but we do a mono repo type approach and currently have 4 NS apps in it. Still working on abstracting a lot of duplicating services though :) they were written without sharing in mind, so they're tightly coupled to ONE specific app so they were copy/pasta in the others for now. However, you can prob get an idea for a somewhat okay setup with our repo here: https://github.com/Max-Mobility/permobil-client

[kamilchlebek]

Thank you, I'll check it. I see that you use multiple package.json files with it's own dependencies. I'd rather stick to one. I guess I'll need to write custom build script that will update package.json just for the build time and then restore previous version (same for webpack.config.js).

That's a bit hacky, but well.. looks like there is no recommended solution by NS

[bradmartin]

I do that bc of the 4 apps and we aren't able to update them all at the same time and keep them in sync to avoid having to go adjust for breaking changes.

Using one package.json is possible. You then symlink the deps to the root for your different apps. Completely possible and I'd say this isn't something NS should worry about this is a configuration for npm/project based.

I'm not part of the team but I'm curious what you'd suggest be their solution? Maybe there is something I'm not understanding 👍

On another note, this https://github.com/nstudio/xplat is something I've helped with and it extends nrwls Nx configuration which is a good foundation for monorepos. Also have worked on projects using xplat and it has a single package.json and symlinks the deps to the apps. Again you can do that without xplat or Nx but they can help with some of the setup of that process.

[kamilchlebek]

I wonder if there are some undocumented/poorly documented options that I can use. Honestly the best things that NS could consider are:

• custom path of webpack.config.js
• custom path of file with configuration (with package id and other required stuff)

Right now these paths are forced by NS. It's just a matter of flexibility of configuration.

Thanks, I'll check xplat :)

[NathanWalker]

@kamilchlebek we're almost complete on a major refactor of xplat here for v8 which will allow full vanilla {N} (without angular) as well as [eventually] {N} + vue and much more all in a monorepo together.

I'd be interested to hear your particular vanilla {N} needs, if anything in particular as there'll be a vanilla generator to auto gen an app in the monorepo. Would be curious your "ideal" vanilla app setup you prefer - like the tsc template or something else.

[kamilchlebek]

I'm using {N} with angular. However I think that my suggestions are valid for any framework and vanilla. In general I've listed all important things in this thread.

Currently we're going to leave {N} for some time, as we are busy with other tasks. I'll check xplat when I'll back to that project and let you know if I have anything to add.

[jonathonadams]

+1 for this feature.

My current use case is that I would like to be able to pass in a config to specify the path of the nsconfig.json so the appPath and appResourcePath can be configured.

[NathanWalker]

@jadams88 xplat 8 has been released and now allows vanilla or with angular nativescript apps to be generated. If you try it you might post back if it meets your needs:
https://nstudio.io/xplat/getting-started
The nsconfig comes preconfigured to work with the setup.

[jonathonadams]

Thanks @NathanWalker.

On first look through it looks like something that might serve the needs. I will check it out.

[NickIliev]

Hey, @kamilchlebek @jadams88 there is the code-sharing functionality (for Angular enabled projects) where you can have a single repo for your Web and mobile projects.

Here is the official documentation and here you can find a blog post explaining the basics.

[kamilchlebek]

Hey @NickIliev I think you may misunderstood the issue. Instead of sharing code between web and mobile project (which we already do), we'd like to configure multiple mobile projects in the same repository.

Also it'd be perfect to keep dependencies in one package.json, same as for multiple web project. However to do so, we need to specify custom path for the config, as NS currently forces us to use root package.json (and other mentioned above).

(I haven't check the xplat yet)

[jonathonadams]

Hey @NickIliev , thanks for the response.

I don't believe this issues should be closed as the actual issue/feature has been addressed (either discussed and considered for future versions or decided against for whatever reason).

I have used the code sharing above in multiple projects and it works great, but that only address a single app per repo. That is not what we are trying to achieve here. Rather we would like to have multiple apps in one repo to re-use code/modules across the apps.

e.g. if I have 4 apps that all use the same auth module then I don't want to maintain the code in 4 seperate places. Rather if they were all in the same repo then it can be shared.

I'm currently using the nativescript/schematics in one of my projects and looking at the webpack.config.js I see the below. These values are passed in as the env when ns executes the bundling.

    const {
        // The 'appPath' and 'appResourcesPath' values are fetched from
        // the nsconfig.json configuration file
        // when bundling with `tns run android|ios --bundle`.
        appPath = "src",
        appResourcesPath = "App_Resources",

        // You can provide the following flags when running 'tns run android|ios'
        aot, // --env.aot
        snapshot, // --env.snapshot
        uglify, // --env.uglify
        report, // --env.report
        sourceMap, // --env.sourceMap
        hmr, // --env.hmr,
    } = env;

Would it not be possible to add an additional flag for a path to a nsconfig.json, defaulting to the root director?

That would allow individual appPath and appResourcesPath per project, effectively achieving what we are after?

I'm happy to look into doing a PR you're open to it when I find some time?

Regards
Jonathon

[jalberto-ghub]

I would like to add my vote to this issue. In particular on Angular+{N} and shared projects one should be able to follow the Angular workflow and use ng generate application to create a new application under the projects sub-directory but sharing the same repo and package.json. The file angular.json is used by the angular-cli to find the location of different applications on the mono-repo.

There is an additional issue and is that because tns-cli does not reads angular.json is not able to apply different configurations and replace environment.prod.ts for environment.ts, for example, which is the most basic of behaviours in Angular. Instead one needs to make webpack.conf.js jump trough hoops to make it all work. This should be all out of the box for Angular+{N} projects.

[jalberto-ghub]

Has anyone looked at this on NS7.0 & Angular 10?
I wonder if the is a way to configure individual nativescript.config.ts so that we can use a monorepo with only one top level package.json:

/package.json
/angular.json
/tsconfig.base.json
/src
      /<common-components>
/projects
     /app1
          /tsconfig.app.json
          /nativescript.config.ts
          /src
               /<app1-components>
     /app2
          /tsconfig.app.json
          /nativescript.config.ts
          /src
               /<app2-components>
...