[HybridApp] Configure HybridApp setup process and local environment

[Julesssss]

P/S authored by @staszekscp here

Problem

One of our biggest headaches is a smooth HybridApp local setup for the developers. I noticed that maybe the most problematic part was to wrap the head around the monorepo structure, and the fact that we have to remember about updating both repositories. This is how the structure looks like:

• :open_file_folder: Mobile-Expensify
  • :open_file_folder: Android: Expensify Classic Android specific code
  • :open_file_folder: app: Expensify Classic JavaScript logic (aka YAPL)
  • :open_file_folder: iOS: Expensify Classic iOS specific code
  • :open_filefolder: react-native: git submodule that is pointed to Expensify/App_
    • :open_file_folder: android: New Expensify Android specific code (not a part of HybridApp native code)
    • :open_file_folder: ios: New Expensify iOS specific code (not a part of HybridApp native code)
    • :open_file_folder: src: New Expensify TypeScript logic

Solution

For the beginning we should create a simple bash script to recognise if we’re currently working on the HybridApp. It could look up one directory, and see if in its package.json the value for the name key is mobile-expensify. :computer:

Then, let’s migrate/create the following scripts in Expensify/App repo in order to minify overhead during the transition to HybridApp.

• setup-hybrid-app - NEW - helper script (in parent Expensify/Mobile-Expensify repo) that would do all necessary setup to start working with the HybridApp. Its responsibilities would be to:
  • help you to set your fork as the NewDot submodule’s origin
  • install dependencies for both, ND and OD
• pull-old-dot - NEW - helper script that would go to OD repo, and pull the changes, so you don’t have to jump between directories
• postinstall - add execution of npm i command in OldDot repo. It would also print out information if your OldDot repo is out of date, and inform you if you should run npm run pull-old-dot - the OldDot repo doesn’t change so often, so it’s easy to forget about it :smile:
• ios, pod-install, ipad, ipad-sm, android, clean - if they’re executed in the HybridApp, run the commands in the HybridApp context (eg. build/clean HybridApp, not NewDot). Otherwise let them work as before. If someone works on the HybridApp, but would like to build NewDot, we can add a --nd flag. In this way running npm run ios --nd in HybridApp would build a standalone NewDot application

By introducing or modifying the scripts I’d like to limit to the minimum unnecessary switches between OldDot and NewDot. We could stay focused on the most important work in the React Native code, but in case of emergency we could jump up, and see what’s going on in OldDot! :smile:

The key takeaway is that on HybridApp we’ll build the native code from another place, therefore the android and ios folders in Expensify/App can be used only to build standalone NewDot, not the HybridApp. I know it may be a bit confusing at this moment, and we’ll point out in the README :smile: Nevertheless by using the proposed commands we should be able to minimise that problem. The android/ios folders will have to stay, though, because many OS contributors will only have access to NewDot, as it is at this moment!

[staszekscp]

Hey! I'll be working on this issue!

[AndrewGable]

Sorry it's taken me a little bit to write this down, I think the goal is this:

New contributor from open source world

1. git clone git@github.com:Expensify/App.git
2. npm install
3. npm run android / cd iOS && pod install && cd .. && npm run ios
4. This should run only New Expensify (they won't have access to Mobile-Expensify)
5. They should be hitting the staging API (they don't have access to dev API)

Existing contributor from open source world

No changes, everything should work the same

New Contributor+/Expert Contributor from Software Mansion

1. git clone git@github.com:Expensify/App.git
2. npm setup-hybrid (This should clone Mobile-Expensify up one directory)
3. npm install (This should install Mobile-Expensify packages, patches, and env as well)
4. npm run android / cd iOS && pod install && cd .. && npm run ios
5. This should run HybridApp (they do have access to Mobile-Expensify)
6. They should be hitting the staging API (they don't have access to dev API)

Existing Contributor+/Expert Contributor from Software Mansion

1. npm setup-hybrid (This should clone Mobile-Expensify up one directory)
2. npm install (This should install Mobile-Expensify packages, patches, and env as well)
3. npm run android / cd iOS && pod install && cd .. && npm run ios
4. This should run HybridApp (they do have access to Mobile-Expensify)
5. They should be hitting the staging API (they don't have access to dev API)

New Expensify employee

1. git clone git@github.com:Expensify/App.git
2. npm setup-hybrid (This should clone Mobile-Expensify up one directory)
3. npm install (This should install Mobile-Expensify packages, patches, and env as well)
4. npm run android / cd iOS && pod install && cd .. && npm run ios
5. This should run HybridApp (they do have access to Mobile-Expensify)
6. They should hit whatever API they have configured in .env in the root of App

Existing Expensify employee

2. npm setup-hybrid (This should clone Mobile-Expensify up one directory)
3. npm install (This should install Mobile-Expensify packages, patches, and env as well)
4. npm run android / cd iOS && pod install && cd .. && npm run ios
5. This should run HybridApp (they do have access to Mobile-Expensify)
6. They should hit whatever API they have configured in .env in the root of App

Questions:

1. Are we able to combine npm install and npm setup-hybrid steps? Maybe we can check to see if the user has access quickly, then clone the repo in the same flow.
2. Are we all in agreement that this is the most ideal DevX?

[AndrewGable]

cc @mateuuszzzzz @war-in ☝️ for any other ideas, questions, etc.

[Julesssss]

This is a huge change that we're not ready to move forward yet.

[staszekscp]

Hey @AndrewGable! Thanks for the post! I like the idea with running the setup-hybrid-app in the Expensify/App repo - I'll just have to investigate how to connect the two repos in this scenario, because we've hardcoded the react-native submodule's name, but it seems that we would have to set it more dynamically 😄 I'm just worried that it may cause some unexpected problems - after all we'll have to change the path to the current working directory (instead of $SOME_DIR/App, we'll have to add a directory and insert the whole repo to `$SOME_DIR/Mobile-Expensify/App. I'm afraid that it may break some local setups, but I'll have to investigate further to see what may be the real repercussions 😄

Are we able to combine npm install and npm setup-hybrid steps? Maybe we can check to see if the user has access quickly, then clone the repo in the same flow.

If we correctly get and setup the Mobile-Expensify repo it should be straightforward - I've already done a similar thing in my previous POC. 😄

npm run android / cd iOS && pod install && cd .. && npm run ios

Should these commands be executed in App or Mobile-Expensify? If we'd like to do it in App, we would have to move up one directory to Mobile-Expensify - otherwise we would install NewDot's pods. I don't really see a perfect way to solve this problem, though... I came up with modifying the npm run pod-install command, because otherwise we would have to change directories manually, which may be confusing. 🤔

[AndrewGable]

I think ideally these commands are all run in App