One of the beauties of React development is the ability to locally develop against a remote server. This allows development to use the latest data updates and to test using real data. However, testing across browsers on different operating systems can become tricky when the only code is on your local machine. The easiest way to accomplish this is to use a Virtual Machine (VM) to run a different operating system, but the challenge is how to force the VM to use your current local files.

The react webapp is built (compiled) into a package and then run as a local webserver with “yarn start” using “localhost” hostname to serve up the files. Localhost always resolves to 127.0.0.1 which is the ip for the current machine “home” and the default hostname for all local web servers. This means that both your local machine and your VM have separate “localhost”s and using http://localhost resolves to the respective machine. To make both machines resolve to the correct web server we need to complete a few steps on both our local files and on the Kinops space for our development.

Development IP

The first step is to record the IP address that our development server is running on the network. You will find this IP address in your terminal once your bundle has compiled.

In this example, the address I need to note is http://192.168.0.32:3000. I will use this address instead of localhost on both machines.

NOTE: This IP address will change when you change networks and the steps included in this article will need to be redone for each network you connect to.

Space Configuration

Now that we have the correct ip address we will start with the space config to allow our ip address to authenticate. Navigate to Space -> Settings in the Kinetic consoles. Then select the OAuth tab:

Next, add an OAuth client using the Add OAuth Client button which will open the following form:

In the Name field add something descriptive so that other admins know the reason for this OAuth. I am using “Stephanie Local Testing”. Add a description in the description field. Then the Client ID field is important as this will be used in your local bundle files. I am naming this client Id “VMClients” so that it’s very clear what this is for in my code. You can add anything to the secret field as we do not need to use a secret to make this work. Now, the next field Redirect URI is where we will be adding the ip address that we saved from our yarn start, http://192.168.0.32:3000, however we need to add more to this URI.

The full URI for my example is:
http://192.168.0.32:3000/#/OAuthCallback

Below is the form filled out:

I then create the OAuth Client by using the Create OAuth Client green button at the bottom of the page. Once that is created you should see it in the list in the OAuth tab.

Next we need to add our ip address to the trusted domains so that we can run Javascript from different domains and not receive CORS errors. Open the Space security settings by selecting the Security tab.

Under Trusted Resource Domains enter the full url with the port, http://192.168.0.32:3000, into the input field and then add the URL by selecting the +Add Domain green button.

Under Trusted Frame Domains enter only the ip address with port, 192.168.0.32:3000, and then add the ip by selecting the +Add Domain green button.

Finally save the settings by using the Save Space Security Policies green button.

Local File Updates

Now that we have an OAuth client id, we need to add this id into our files. In the bundle, navigate to Packages -> app -> src -> utils and then open authentication.js.

We are going to modify the OAUTH_CLIENT_ID declaration to use our Client ID from the server (I chose to comment out the original values and then add my client id so that I can easily revert - keeping this data is not required.):

Once your files are updated and saved, stop the localhost server in your terminal and then restart with yarn start.

You should now be able to navigate to http://192.168.0.32:3000/ in both your local browser and the VM browser.