React Native on a machine 8081 occupied

Today, as i was setting up a basic React native app on my company’s laptop, I cannot run the RN packager server which is default to port 8081​. I ran the lsof -i :8081 but get nothing. Turns out I have to run it with sudo because the app that uses this port is the Corporate Mcafee.

Ideally i do not want to uninstall/unload Mcafee unless I have to, try to find a work around first . (For iOS, as of Sep/2017, I did not find a way for RN​ to work on a custom port, so have to unload McAfee, which is unfortunate.)

First thing to do is to run the packager server in a different port:

react-native start --port 8088

And now the packager server is up and running. However when i run react-native run-android , it still tells me JS server not recognized , so to get rid of this msg, i have to change some source code in the node module. The logic is in node_modules/react-native/local-cli/util/isPackagerRunning.js, and we just need to change the port in the fetch function from 8081 to the 8088 that we use above.

Now the android app should be able to be installed in the virtual device and run. However we still could not leverage the live reload capability of RN because if we double click r to reload, we get a red screen saying cannot connect to 10.0.2.2:8081. This is because when we use Genymotion virtual device, the code in node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/AndroidInfoHelpers.java will return that url. So we need to cmd+M in the emulator, Go to Dev Settings → Debug server host for device, enter ‘localhost:8081’. 

This is to overwrite the emulator’s debug server.(NOTE: if you are connecting your REAL android device, you do not have to change the above host).  Now we have the last step which is to forward the request in our local VD’s 8088 port to our machine’s 8088 port which runs the packager server by doing:

adb reverse tcp:8088 tcp:8088

The first part is VD and 2nd one is for the hosting machine. More about adb reverse. (Note: even for the VD, try to avoid using 8081. It would work for normal development/reload, but will not work with chrome remote debugging which still forwards the http request for index.android.bundle  to the host’s 8081 which is used by Mcafee.)

Now you should be able to change your index.android.js and hit r twice or cmd+M -> Reload to reload the VD.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s