Ionic project - multiple clients/frontends in same project

Hey all!

I’m trying to get my head around some design(architecture) principles for ionic in general. This is not something that is specific in code. more in structures of how to set up your project.

So basically, I’m having a project that has multiple clients, and thus appearances. The only difference is in the views: colors, paddings, margins, images, sometimes a different page layout. But all apps do the same thing: (for example) serving food in one or more restaurants. Therefore my codebase should be generic for every client, just the visual layer should change. We can have lots and lots of different clients, but we need it to be very easy to get each layout in the latest version of the base-code.

I’m obviously missing something huge here. Any ideas how to achieve this?

Some extra information on my dilemma:
Must haves:

  • All components, providers, services, models should be the same per client
  • All views (pages) should be different per client
  • Some SCSS should be different per client, some SCSS should be generic for all clients that make use of the project
  • Clients cannot have eachothers client-specific-files in their apps: scss, logos etc should be in each client’s own apk/ipa, but definetly not in oneone else’s

Good to have:

  • Some views could be generic (like login)

So this is how we did it before we used ionic/typescript:

  • We created a cordova project
  • We used a lot of js files which were generic
  • We used a lot of .client.js files which were client-specific
  • For each release/test build we did a custom copy of the cordova project, put the specific client files over the generic/base client files (we had the files in the base to be able to test the basic layout for new clients)
  • We had some CI to watch the files and copy & reload the http-server

For our ionic project:
I’m seeing the following problems with writing custom build/watch/hook scripts:

  • Ionic:serve is watching the staging folder, so I can’t copy files in it (the first file copy means rebuild, but a lot of files are changed in a short period, I think ionic:serve can’t handle that, or there is something else going on, but I’m getting a lot of EACCESS/ELIFECYCLE errors here
  • Ionic:build can be triggered áfter the copy, but I can’t copy while my http-server is running, but I also can’t kill the http-server child process for some reason (I think because it spawns child-processes?) (ALSO: this would mean losing ionic’s built-in live reload, which i love)