React Native Hot Updates and CodePush in Practice

Introduction It has been a long time since my last update. In the meantime, I did some translation work for the SwiftGG team — feel free to check it out here. On the technical side, I've been focused on React Native: from fighting countless red warning screens to using it in a production project, to getting a solid foundation in place. The main thing that changed was my mindset, so I didn't document much of the technical detail along the way. Now that I'm rolling out a hot-update solution, I've done some research and found there's quite a bit of configuration involved, so I figured I'd write it up. The main hot-update solutions are Microsoft's CodePush and Pushy. Considering flexibility and security, I leaned toward deploying my own hot-update server — which led me to code-push-server. I'll just document the steps and the key gotchas. No deep-diving into theory; I'll provide links where relevant. Environment Setup The currently stable RN version is 0.44.3, with a corresponding version of 2.x. Add to your : After , run inside the iOS directory. If the iOS project fails to compile, clear all caches. Also, 0.44.3 has a bug where cannot be found. Add a build script to to work around it: In the iOS project's plist file, add keys and — the values for these are covered below. References: https://github.com/Microsoft/react-native-code-push https://github.com/coderwin/CodePushCN Deploying code-push-server The steps are described in detail in this link. One important thing to note: before starting the server, you must install and start MySQL. In the file, beyond the changes mentioned in the docs, you also need to update: the database and password, (change it to your own directory), , and . Just search for the relevant keywords and update them — otherwise you'll get permission errors when the server tries to create directories. Other reference: Building Your Own CodePush Update Server for React Native The mentioned above is the URL of your deployed server. For local testing, you can use ; for LAN testing, replace it with the appropriate IP address. is the deployment key. Different deployments have different keys. Code Changes Modify the bundle-loading code in the iOS project: CodePush provides several methods for loading resources — use whichever fits your needs. In , you can import and enable logging with . Key JavaScript code: Hot Update Operations The main tool is for bundling and publishing updates. Key command reference: CodePush CLI Commands The most important command is , which is essentially a combination of and . One thing to note: when looking at the help for , there is a parameter worth paying attention to. The default bundle name for iOS is . I had previously configured the build to output , but when applying updates the system would complain it couldn't find , so I changed it. The parameter is used to specify the iOS plist configuration file; the version in that file is used as the base version for the update. Also, in the CodePush workflow, whether a hot update is available is determined based on the parameter in or the version in the plist file. The version of the hot update (i.e., the bundle package version) is identified by a . For example, running : After changing the navigation bar color and running , restarting the app shows the updated navigation bar color. Summary At this point, the local CodePush deployment is working. Next week I'll move on to project integration and server deployment — I'll document any issues that come up.