Create a monorepo with ionic and react (and capacitor)

Question

I understood that Ionic cannot handle 'yarn workspace' which build the project with react-app-rewired https://github.com/ionic-team/ionic-cli/issues/4430

As suggested in this post, I configure my monorepo with the multi-app option( https://ionicframework.com/docs/cli/configuration#multi-app-projects)

To valide the project structure, I firstly tried to share a simple constants.

import * as ROLES from '../../../../lib/constants'

but when I launch ionic serve --project=app

Have got this error :

Module not found: You attempted to import ../../../../lib/constants which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Project structure :

ionic.config.json

{
  "defaultProject": "myProject",
  "projects": {
    "app": {
      "name": "My First Ionic App",
      "type": "react",
      "root": "packages/app",
      "integrations": {
        "capacitor": {}
      },
    }
  }
}

How to manage to share files and components ?

Thank you

user_1587729 · Answer

Ok, after several day. I have an answer to build monorepo with Ionic & Capacitor !

1 - Build your monorepo with Yarn workspace this tutorial is simple and clear : https://jibin.tech/monorepo-with-create-react-app/ Then you will use react-app-rewired and not 'react-scripts` anymore

2 - Then do not use ionic serve that use react-scripts

react-app-rewired start

3 - and Capacitor ! The command ionic cap run also use react-scripts then you have to find an alternative

The answer is here https://capacitorjs.com/docs/guides/live-reload : Do not use the Ionic CLI

Capacitor supports CLIs with live reload capability.

Within capacitor.config.json, create a server entry then configure the url field using the local web server’s IP address and port:

"server": { "url": "http://192.168.1.68:8100", "cleartext": true },

Bonus : I created a script to automatically update capacitor.config.json https://gist.github.com/damienromito/e6b3930ffde4c7240f109d1de69febb5

Create a monorepo with ionic and react (and capacitor)

1 Answers