monorepo for h5 and pc

[trydofor]

repos

• mobile UI
• desktop UI
• shared lib

reference

• https://ionicframework.com/docs/cli/configuration#config-file
• https://capacitorjs.com/docs/vscode/monorepos
• https://docs.npmjs.com/cli/v7/using-npm/workspaces
• https://ionic.io/blog/ionic-and-lerna-and-rollup-oh-my
• https://www.paulserban.eu/blog/post/mastering-npm-workspaces-a-guide-to-streamlining-javascript-projects/
• https://ionic.io/blog/monorepos-with-ionic-vue-and-npm

[trydofor]

• https://forum.ionicframework.com/t/converting-projects-to-work-with-pnpm/230612
• https://docs.npmjs.com/cli/v9/commands/npm-link
• Add support for Monorepos & enhanced package resolving fixes  capacitor-community/electron#279

[trydofor]

technical point

• workspaces of npm
• multi-app of ionic
• versioning
• dependency
• @razor as scoped, rz-* as component

workspace naming

• front-desktop - front(user) desktop web/win/lin/mac
• front-mobile - front(user) mobile app
• fonnt-shared - @razor/front lib
• razor-utils - @razor/utils

[trydofor]

node -v ## v18.18.0
npm -v ## 9.8.1
ionic -v ## 7.2.0
npx cap -V ## 5.7.4

## Must follow the steps because of poor support monorepo of ionic, cap
## init ionic project first, then hoist deps and config

cd professional-razor
npm init -y
ionic init --multi-app

## save point
git add --all && git commit -am '1.1 empty ionic workspace #1'

mkdir packages
cd packages

## ## init desktop and its deps
ionic start front-desktop blank --type vue
##> [success] capacitor.config.ts created!
##> [OK] Integration capacitor added!

cd front-desktop
mv ../../capacitor.config.json ./

npm run build
## add electron
npm i @capacitor-community/electron
npx cap add @capacitor-community/electron
npx cap open @capacitor-community/electron
##> Opening Electron platform: running electron app

## save point
git add --all && git commit -am '1.2 desktop electron #1'

cd ../..
cd packages

## ## init mobile and its deps
ionic start front-mobile tabs --type vue
##> [success] capacitor.config.ts created!
##> [OK] Integration capacitor added!

cd front-mobile
mv ../../capacitor.config.json ./

npm run build
## add android
ionic capacitor add android
##> [success] android platform added!
java -version
##> OpenJDK 64-Bit Server VM Temurin-17.0.9+9 (build 17.0.9+9, mixed mode)
npx cap run android
##> Deploying app-debug.apk to Pixel_5_API_27 in 64.24s

## add ios
ionic capacitor add ios
##> [success] ios platform added!
npx cap run ios
##> Please choose a target device: › iPhone 15 Pro (simulator)
##> Deploying App.app to 85CA5B1D-9EAB-45EA-BEBC-3A83678F4C58 in 80.96s

## save point
git add --all && git commit -am '1.3 mobile android ios #1'

cd ../..

## ## init npm workspaces
cat > package.json <<EOF
{
  "name": "professional-razor",
  "version": "1.0.0-beta.100",
  "private": true,
  "description": "Use front-end tech (Vue/Css/Ts) to build multi-platform from one codebase, suitable for small team and app to write logic once, run anywhere.",
  "workspaces": ["packages/*"]
}
EOF

## link local package to node_modules
npm init --scope @razor --workspace packages/front-shared -y
npm init --scope @razor --workspace packages/shared -y

##
cat packages/front-desktop/.gitignore > .gitignore

## save point
git add --all && git commit -am '1.4 npm workspaces #1'
## squash to one
git rebase -i HEAD~4