Last time, we looked at how to build a Universal Windows Platform app in React Native in VirtualBox with a Windows 10 Developer VM. In this article, we’ll look at how to add the Windows Universal Platform into an existing React Native app that’s already targeting other platforms.

Behold the amazing SuperfitTracker, the fitness app that promises to not outdo any other existing fitness app on the market.

This app was created for the purpose of demonstrating a migration from Cordova to React Native. It runs on both iOS and Android. Now it’s time to add a Windows version. Once again, I’m using a Mac running a Windows 10 Developer VM inside VirtualBox. Please refer to my previous article for the basics on how to get that setup for React Native Windows.

If you’re like me, you’ll still want to do all of your development on your host machine, rather than inside the VM. There are several ways to do this, with pros and cons for each. I decided to simply share my existing source code directory with the VM. In Windows, this directory will automatically be mounted as a network drive. In this case, I’m mapping the directory one level up from root of the project. I prefer to do that so that the root directory will be E:\SuperfitTracker, rather than just E:\ in Windows. To do this, go to the VM’s settings and click on Shared folders. Click the “+” button to add the directory you want to share, and make sure it’s set to auto-mount and that full read/write access is enabled.

Now, the next time the Windows VM is fired up, we can see that directory is available to us by opening up Explorer.

Now we’ll add React Native Windows to our project. At the time of this writing, React Native version 0.39.1 is as far as we can go with the Windows plugin. You can do all of the following on your host machine in a terminal window.
UPDATE (02/17/2017): React Native Windows now supports React Native version 0.42

npm install -g react-native-cli

npm install -g react-native-git-upgrade

cd [to your project's directory] (if not already there)

react-native-git-upgrade 0.39.1

npm install

Make sure your app still builds and runs before proceeding. You may need to update certain plugins/modules, or blow away caches, watches, and uninstall and re-install node modules. I know it’s not fun, but unfortunately sometimes is necessary. If everything is fine and dandy, you can add React Native Windows to your project.

npm install --save-dev rnpm-plugin-windows

react-native windows

With that out of the way, we can continue on with development. Last time, we ran the React Native packager right inside Windows. This is fine, but you might as well leverage the power of your host machine to do this. That way, you can also be running and testing the app on other platforms at the same time.

Your host should be accessible to the Windows VM, as noted here via the IP address:
10.0.2.2

There are a couple things that you need to do now in order to have “seamless” interaction between your Windows app running in the VM, and the React Native packager, which is running on your host machine. Someone with more Windows experience might know a better way. If so, please feel free to leave a comment!

1. Add an entry to the hosts file, so that you don’t need to remember the IP Address
2. Add the above host name to the file DevServerHelper.cs (support to do this via configuration parameters is coming)
3. Setup your Debug configuration in Visual Studio to target a “Remote Machine” and name that machine “localhost”

If the last step seems weird, it’s to get around a security restriction in Visual Studio. It doesn’t want you to build/run code that’s on a shared drive. But hey, at least there’s a workaround. Let’s take a look at these steps in detail.

Step 1.
Open a Command Prompt as an administrator and do the following:

cd C:\Windows\System32\drivers\etc
notepad hosts

And add this mapping to the bottom of the file and save it:

10.0.2.2     reactnativehost

Ideally, you would map it to “localhost”, just like you would in /etc/hosts on a Unix/Linux like OS. For whatever reason, I could not figure out how to make this work. Again, if you know, please leave a comment! I would love to know. If we could do that, then there would be no need for step 2.

Step 2.
From either your host machine or the VM, open the file:
node_modules/react-native-windows/ReactWindows/ReactNative.Shared/DevSupport/DevServerHelper.cs

And change:

private const string DeviceLocalhost = "localhost:8081";

to

private const string DeviceLocalhost = “reactnativehost:8081";

Step 3.
Open the solution file in Visual Studio, which is here, if you have the same shared folder mapping as I do.

E:\SuperfitTracker\windows\SuperfitTracker.sln

When the project loads, right click on the name of the project in the Solution Explorer on the right side of the screen and select “Properties”.

Now click on “Debug” and set the Target device to “Remote Machine” and the Remote machine name to “localhost” as shown below.

And now we get to the fun part. On your host machine open up a terminal window, navigate to the root directory of your project and start the React Native packager.

react-native start

Once it’s up and running, go back to the VM and open a web browser. Type the following into the address bar:
http://reactnativehost:8081
It should show a simple page that says the React Native packager is running. If it does, you’re good to go. If not, double check the hosts file that you edited earlier in step 1 above.

Now for the moment of truth. In Visual Studio, at the top of the screen, make sure that the “Debug” configuration is selected, the architecture is “x86” and the target is “Remote Machine”, as shown in the screenshot above. Now press the Run (Play) button.

If you’ve checked out the “windows-dev” branch of the project, you’ll see the actual GUI for the app, otherwise, you’ll see the default React Native screen that you get when you create a new app.

You’ll notice that there are no activities listed. This is because there’s no Windows implementation of the SQLite plugin that I’m using for the app. I’m currently in the process of writing a Native Module to implement only the minimum functionality that I need. I know, I know. It would be best if I did a full implementation of the actual plugin. Hopefully I can help pitch in one day, but I’m still green with React Native on Windows and my C# chops are a little rusty and I’m also about 12 years behind in the Microsoft dev world. Excuses, excuses! Someday, hopefully, I can give back and contribute.

I hope this walkthrough helps and is enough to get you started. Please let me know if there’s anything I missed or if there are any questions and/or suggestions you might have.

Cheers!