How to release many mobile apps from one repository in Capacitor?

Damian Sowa
2 min readMar 22, 2023

Some time ago I created a hybrid app — web/android/ios that help to prepare for the Thai driving exam — https://www.driving-exam-thailand.com . The app got popular and I thought about creating similar apps for other countries. The difference between other apps is mostly questions so I thought would be great to be able to build many mobile apps from one repository. I’ve checked on the internet but couldn’t really find any ready solution. After a little bit of work, I managed to create a nice working solution that I will present below.

/
├── android/
├── ios/
└── capacitor.config.ts

After adding Capacitor to your project (and android and ios) you can see that actually Capacitor add only 1 file (capacitor.config.ts) and 2 folders (android/ and ios/). So I thought that actually, I can just move these files to another place and then build the project. Unfortunately, I’ve found that the capacitor needs these files in the main folder to work. This is actually not a problem it means that I just need to move those files to the main folder and after building the app I can move them back to wherever I want.

/
├── capacitor/
├── th/
├── android/
├── ios/
└── capacitor.config.ts

You can see above a new folder structure. So now I need to automate moving files. I’ve found an npm library — shelljs. That allows running shell scripts. After playing a little bit I’ve created 2 scripts and added a reference to package.json .

// build-mobile.js
const shell = require('shelljs');

const [country] = process.argv.slice(2);

if (country) {
// Move from localized folder to main folder
shell.mv(`./capacitor/${country}/capacitor.config.ts`, `./capacitor.config.ts`);
shell.mv(`./capacitor/${country}/android/`, `./android/`);
shell.mv(`./capacitor/${country}/ios/`, `./ios/`);

shell.rm(`-R`, `./capacitor/${country}/`);

// You can add comands here for building your project
}
// clean-mobile.js
const shell = require('shelljs');

const [country] = process.argv.slice(2);

if (country) {
// Move back from main folder to localized folder
shell.mkdir(`./capacitor/${country}/`);

shell.mv(`./capacitor.config.ts`, `./capacitor/${country}/capacitor.config.ts`);
shell.mv(`./android/`, `./capacitor/${country}/android/`);
shell.mv(`./ios/`, `./capacitor/${country}/ios/`);
}
// package.json
{
...
"scripts": {
...
"build-mobile:th": "node ./build-mobile th",
"clean-mobile:th": "node ./clean-mobile th",
...

You can see that scripts are really easy they just move files between a specific folder and the main one. Now if I want to build a mobile app for a specific region I just need to run npm run build-mobile:[country] and after building clean it with npm run clean-mobile:[country]. I think it is a clean and nice solution.

--

--