How to test Sharepoint sites on iPad, iPhone and other mobile devices

In Sharepoint development we often use VMWare images for development environments. In most of the projects in my practice we used this model. It is useful when there are configured ready for use development images, so developers only need to get the image and start to work. But how we can test sites which are developed on the VMWare images on mobile devices? At the current moment role of mobile devices in web development is growing and Sharepoint 2013 reflects this fact with new features like device channels for improving user experience for using sites on smartphones or tablets. Responsive design becomes more and more popular, and it became a trend in the public web sites development. If some time ago the usual situation was that site has good design for desktop browser, but poor design for mobile, then now I already saw sites which looks nice on mobile and awful on desktop. Fun example, but it is true.

If you develop new site on Sharepoint 2013 (or any other version of Sharepoint) and want to test it against real devices (not simulators), there are several ways:

1. configure DNS – add A record like foo.example.com which points to some external IP address of your organization (you need to use IP address of organization because in most cases in our daily work we use organization network and domain) and then ask administrators to configure proxy servers to forward requests for this domain name to your development image. It is possible, but has risks, especially if you are working in big organization and this process requires approval on several levels;
2. setup builds on separate build server with configured DNS as in previous step. But it is also problematic when during development you need to test small changes. Build can take time, so deploying changes to another server will make the process slower;
3. configure ports forwarding and use IP address instead of domain name for testing.

In this post I will describe how to make it using 2nd way.

Step 1. Connect to the WiFi network (guest network) of your organization.

If you want to test your dev sites on mobile devices you need to connect your host machine to the WiFi network (I don’t know is it possible to use LAN e.g. on iPhone, but knowing how technologies are growing, it won’t be surprise for me if there is some gadget which allows to do that). Many organizations have guest networks with limited access and we may use this network for our need.

Step 2. Get IP address of the host in the guest network.

Once you have connected to the WiFi get IP address of the host machine using the ipconfig command. You need to copy “IPv4 Address” property of the WiFi connection. For our example suppose that it will be the following:

10.20.30.40

Step 3. Allow incoming requests to 81 port on the host and guest.

For testing it is simpler to use some port which differs from default http 80 port, which can be used on the host for other purposes. In our example we will use port 81. In order to allow connections using this port go to Administrative tools > Windows Firewall with Advanced Security > Inbound Rules > New Rule:

On the 1st step choose “Port” and click Next:

On 2nd step add 81 to “Specify local ports”:

On 3rd step leave “Allow connection”:

On the 4th step leave all options checked:

On the last 5th step specify name for the new rule:

Make the same configuration on guest.

Step 4. Configure port forwarding in VMWare virtual network editor.

In order to configure port forwarding your virtual image should use NAT network connection. Go to VMWare > Edit > Virtual network editor, choose the network connection used by your image and click NAT Settings button. In the opened window click Add under “Port Forwarding”:

In the opened “Map Incoming Port” window specify the following values:

• Host port: 81 – port which will be used for accessing the site from mobile device;
• Type: TCP;
• Virtual machine IP address: 11.22.33:44 – here you should specify IP address of the virtual image. You may check it using ipconfig inside the guest image. For our example we will assume that it will be 11.22.33.44;
• Virtual machine port: 81 – it is also better to use different than default 80 port on the guest image, because when you setup port forwarding for port 80 in VMWare, you loose internet connection on the guest.

Window with values should look like this after all:

After that click Ok on all windows so changes will take effect.

Step 5. Setup bindings in IIS site.

Inside virtual image go to IIS manager, select your Sharepoint web site, click Bindings > Add:

In IP address you need to specify IP address of the virtual images, the same as was specified on step 4 in the “Map Incoming Ports” window. Port should be set to 81: also the same which was used on steps 3 and 4.

Step 6. Add alternate access mappings in Central Administration.

Go to CA > Configure alternate access mappings and filter AAM collection for your Sharepoint site. Then click “Edit public URLs”. In some free zone add the following URL: http://10.20.30.40:81 (i.e. use IP address of the host as it will be used for opening the site in mobile device’s browser):

After that click “Add Internal URLs” and add URL http://11.22.33.44:81 (i.e. use IP address of guest system here) for zone where you specified public URL above – Intranet in our example. So alternate access mappings should look like this:

After that get your iPhone, connect it to the guest WiFi, enter http://10.20.30.40:81 in the browser and test your Sharepoint site in real mobile browser. Hope this guide will help you in development of sites with great user experience for mobile devices.