Amplify-cli: How to structure a project with multiple front-ends (i.e. React & React Native)

[chrisl777]

I'm wanting to creating an Amplify project that contains a React front-end, as well as a React Native front-end. I'd like to share some code between the projects. I'd like to have each project use the AppSync API helpers that the CLI outputs (queries.js, mutations.js, etc.). And I'd like to share some of the codebase. How do I structure the project such that it will work with the Amplify CLI in a monorepo?

I was looking at using Lerna, which helps handle multiple "packages", but I'm not sure how to structure the project. I was considering the following directory structure, but I don't know if the Amplify CLI would support it:

lerna.json 
package.json 
-amplify/
  -.config/
  -#current-cloud-backend/
  -backend/
-packages/
  -my-react-native-project/
    package.json 
  -my-react-project/
    package.json
  -shared-code/
    package.json 
    aws-exports.js  

[MatthieuLab]

Good question. I also would like to have a clear idea on this. For now I have 2 separated project and I copy/paste the aws-exports. Not found of this approach, you can imagine.

[yuth]

The structure you have above should be fine. You could also separate backend as separate package where you would keep backend specific code and use it in both react and react-native project

lerna.json 
package.json 
-packages/
  -my-react-native-project/
    package.json 
  -my-react-project/
    package.json
  -backend-project/
    - amplify/
     - .config/
     - #current-cloud-backend/
     - backend/
    - package.json 
    - aws-exports.js  

[chrisl777]

@yuth Thanks for your feedback! I started going down that route and realized some issues. Closing this question in favor of a feature request with details (#582).

[ricardoribas]

In the project i am working at the moment i have a similar problem. Our solution was to create an additional package as @yuth stated. Additionally, we add a postInstall script in package.json that will just add symlinks to all the frontends using amplify backend. In our case, it worked like a charm. 🎉 I hope this intel is useful.