Best way to share components etc. between multiple apps?

Ionic Framework ionic-v3
6

@HanHermsen @richie765 @rlouie

We had the same problem to solve. There are lots of common components that are shared among multiple apps. We also wanted to keep same linting, build, test scripts for all apps. That’s why we decided to keep them on a single repo to keep it more maintainable. But as you said, there’s a watch issue for common components folder which is very annoying.

Our solution:

  • Run a setup script once to set an environment value for src dir and create symlinks for config files for an app.
  • Keep different applications on different folders and set env value IONIC_SRC_DIR once on setup to point out which app to work on for ionic-cli.
    • /src/apps/appA/src/config.xml
    • /src/apps/appA/src/{{ionic_app_a_src}}
    • /src/apps/appB/src/config.xml
    • /src/apps/appB/src/{{ionic_app_b_src}}
    • /src/common/{{common_components_src}}
  • Symlink app specific config files config.xml, .io-config.json, ionic.config.json to the root once on setup.

setup.js

const appName = argv.app;
const rootDir = process.cwd();

console.log('Setting up .env and symlinks for ', rootDir);

fs.writeFileSync(path.join(rootDir, '.env'), `IONIC_SRC_DIR=${path.join('src/apps', appName, 'src')}`);
[
    '.io-config.json',
    'config.xml',
    'ionic.config.json'
].forEach((file) => {
    fs.removeSync(path.join(rootDir, file));
    fs.symlinkSync(path.join('src/apps', appName, file), path.join(rootDir, file));
});
  • Extend ionic app-scripts’ default watch.config.js to point out common components path to watcher.

/config/watch.config.js

const watchConfig = require('@ionic/app-scripts/config/watch.config');

// Since we build multiple apps on the same repo and share a common component module among them,
// we need to add path of common components to make ionic-cli watch for changes of it
watchConfig.srcFiles.paths.push('{{SRC}}/../../../common/app/**/*.(ts|html|s(c|a)ss)');

package.json

"config": { 
   "ionic_watch": "./config/watch.config.js"
}

We built the architecture above to build multiple ionic apps on the same repo and share common components with them and it works fine for us so far. I hope it helps for the ones seeking a similar solution.

2 Likes