feat(react-native-code-push): add react-native-code-push plugin

[GSTJ]

Why

This PR adds Codepush support without requiring manual changes to the native code. It's based on the work started on this thread, which never got merged: https://github.com/microsoft/react-native-code-push/pull/2415.

The community claimed this was broken on Android, so my work completely re-structured his work, ensured every step made sense, and followed the most up-to-date official Codepush documentation for both IOS and Android.

How

This evolved from a fork of @deggertsen's work at https://github.com/deggertsen/react-native-code-push-expo-plugin. The work here never got published on NPM and had some outstanding issues.

This is a rewrite, where I followed the newest Codepush Documentation step-by-step and updated every file accordingly to match. I also refactored and consolidated his work to make it easy to understand and follow through.

Shoutout to @deggertsen for his solid base structure.

Why not just merge it to Microsoft's repo?

@deggertsen has had a PR stuck on review since the beginning of the year, and there is a lot of bureaucracy in getting this code into CodePush's main repo.

Effectively, it isn't a repository made with this plugin in mind.

The idea here is to shine a light on the necessity of this plugin and battle-testing this approach with more users, and maybe we can get this merged into Codepush in the future.

@expo/config-plugins is community-maintained, so this fits better here for a head-start. I want to have this released on NPM sooner.

Test Plan

I've created a react-native-code-push folder on /apps, so this plugin can be more easily tested.

1. Open the react-native-code-push folder on /apps
2. Run yarn to install the projects dependencies
3. Run npx expo prebuild
4. Check if the changes on the IOS and Android folders match the Codepush instructions here: IOS, Android

[deggertsen]

Love this! Thanks for building on this and getting it more out into the community.

[GSTJ]

Thanks @deggertsen!

By the way, I'm aware this might not fit monorepos. It just follows the Codepush docs line-by-line, which were mostly aimed at non-monorepo projects.

The original (@deggertsen) PR had some code for node module resolution focused on solving this issue. However, there have been reports of production issues on Android with that code, making me not want to risk something I don't fully understand.

I would appreciate a hand and eyes if we want to add monorepo support here, as it's the only thing I see that might be missing, but in all honesty, it follows the readme correctly and should help tons of people as-is already.

Messing something up for not following the doc's instructions line-by-line isn't something I want to risk right now, as any mistake might affect tons of users.

[deggertsen]

We're using this on a Monorepo ourselves with this plugin as a separate package. I think the main difference I'm seeing in the code in my monorepo is this line:

const codePushSettings = `include ':app', ':react-native-code-push'\nproject(':react-native-code-push').projectDir = new File(["node", "--print", "require.resolve('react-native-code-push/package.json')"].execute(null, rootDir).text.trim(), "../android/app")`

In my main expo package I have an app.plugin.js that points to the plugin package in the monorepo module.exports = require('@mymonorepo/expo-codepush-plugin/dist/src') and am of course pointing to the app.plugin.js file in my app.config.js.

I feel like what you have here is a fantastic start. It will be easier to create PRs and suggest improvements once there is a baseline in place. So I don't feel like monorepo support is necessary out of the gate.

[GSTJ]

Thanks, @deggertsen, I'm with you there.

[GSTJ]

For anyone needing this plugin, I published this as an interim solution while this PR isn't merged: https://www.npmjs.com/package/react-native-code-push-plugin

[mvolonnino]

@GSTJ - wow this is awesome! My current production app utilizes codepush (bare RN as well) right now, and we have been refactoring the whole app to re platform and leverage how great Expo has become - and with EAS updates being integrated and a great option, my company still wants to go with codepush for OTA stuff.

Is there plans for getting this merged / could I implement this in a production app?

[GSTJ]

@mvolonnino I'm currently using this version I published under NPM as an interim solution on our project; it's working great for us on production. The app has 300k+ active users, so that's been battle-tested.

For anyone needing this plugin, I published this as an interim solution while this PR isn't merged: https://www.npmjs.com/package/react-native-code-push-plugin

[mvolonnino]

@GSTJ - wow thats amazing! Okay awesome, I am going to look into this this week and i'll let you guys know if I run into anything 👍

Thanks again for this, this is some amazing work and a big help to the rest of the community 🔥

[mvolonnino]

@GSTJ - quick question, i've followed the plugin readme, but just want to double check, after setting everything up through the plugin readme, I can now integrate CodePush through their docs correct?

Like wrapping the App, adding codepush options, etc? https://learn.microsoft.com/en-us/appcenter/distribution/codepush/rn-plugin

Config plugin to auto-configure react-native-code-push when the native code is generated (npx expo prebuild).

Just double checking, as EAS is setup so its an eas build command, not expo prebuild, but the plugin will work all the same correct?

[GSTJ]

@mvolonnino You can surely continue with their docs. The plugin only does the native changes for you.

About prebuild, I recommend you run it. It will apply the plugin changes to your IOS and Android folders.

You should be able to run the EAS build normally; yes. EAS build is likely running prebuild for you on the CI.

[mvolonnino]

About prebuild, I recommend you run it. It will apply the plugin changes.

You should be able to run the EAS build normally; yes, there is no need to change your CI.

@GSTJ - okay awesome! So just to make sure I understand you correctly, when i utilize the eas build xxx command to make a new build since i have app.config changes and native changes (through the plugin) - that is what you mean by you recommend running expo prebuild command to apply the plugin changes. The eas build command will generate a new build that I could utilize in the same regard

*edit - I see your edited post so I think that answered this follow up, but just double checking 🫡

[GSTJ]

@mvolonnino If you commit the 'IOS' and 'Android' folders to Git:

• You need to run 'npx expo prebuild' every time you add a new plugin because adding a new plugin may change the contents of these folders.

If you don't commit them:

• The 'IOS' and 'Android' folders will be generated for you, as EAS Build runs prebuild on the CI automatically.
• Even though the CI handles this for you, it's still a good idea to run 'npx expo prebuild' locally to ensure that your local 'IOS' and 'Android' folders stay updated.

I recommend a read here https://docs.expo.dev/workflow/continuous-native-generation/

[mvolonnino]

@GSTJ - sweet thank you for the article, will read up on CNG as well. Thank you again. Appreciate all your help on this

[mgscreativa]

Hi @brentvatne can you take a brief look at this, this is really cool if it can get through. Thanks!

[brentvatne]

most of the expo team is out on holidays at the moment but we'll get back to you in the new year!

[mgscreativa]

Great! @brentvatne love you man, I really do! Happy holidays!

[glncy]

Hopefully, Expo Team can see this and accept this. and hopefully expo team can add how to use codepush in expo router in their documentation. this is the solution i found on github using codepush and expo router: https://github.com/microsoft/react-native-code-push/pull/2415#issuecomment-1522585040

[brentvatne]

@glncy - codepush is being sunset by microsoft, so i don't think it makes sense for us to support this here.

https://learn.microsoft.com/en-us/appcenter/distribution/codepush/