If you are developing a Web application for a mobile device, it’s great if you can run it on a real device. Sure enough, you can deploy your app on the remote publicly available server and then enter the URL of that server from your mobile device. This strategy works for any mobile device.
But I had a more specific case: I have two Apple devices: MacBook (my development machine) and iPhone – my mobile device. I wanted to connect to the Web Server running on my MacBook from my iPhone connected to the USB port of MacBook. To put it simple, I wanted to eliminate the step of deploying the Web app on a remote server.
I’ll share with you all experiments I’ve done this morning till I made it work. I’ll appreciate your feedback if can offer some explanations of the Web server weirdness I had to overcome.
1. Both devices have to be on the same Wi-Fi network.
2. You need to know the IP address of your MacBook on this local network – this is the part of the URL to enter in the browser of your iOS device. There are two ways of finding this IP address: either open System Preferences | Network – the IP address is shown right under the Wi-Fi connection or run the Network Utility to see it there. In my case it was 10.0.1.3.
3. Start the local Apache Web Server that comes with Mac OS. Prior to Mountain Lion doing that was easy – System Preferences | Sharing | Web Sharing. Now Apple removed this option, but Apache Web Server is still there. you can start it from the Terminal as “sudo apachectl start” and stop with “sudo apachectl stop”. After start, enter http://localhost, and you’ll get this given you’re Mr. Fain:
4. The document root directory of this server is /Library/WebServer/Documents. This is where you need to deploy your HTML files.
5. Here’s the problem: if you’ll try to access this Web server from your iPhone (e.g. http://10.0.1.3), you’ll get the error “Safari Cannot open page because it could not connect to the server”. Adding the port 80 to the URL didn’t help. The interesting part is that when I tried to start another server on my computer – it was Apache Tomcat running on port 8080, I was able to connect to it from my USB-connected iPhone. This gave me a hint there there is something wrong with the port 80.
Disclaimer 1. I still don’t know what kind of setting should be changed on the Web server to allow such connection. If you do – please share.
6. Change the default port where your Apache Web server runs. Change to the directory /etc/apache2 and edit the configuration file httpd.conf using “sudo nano httpd.conf”. Find the line that reads “Listen 80 ” and change 80 to another port number, for example 8000.
Now my iPhone can reach my local Web server via the USB connection by entering the URL: 10.0.1.3:8000.
Update: I just got a hint that instead of IP you can use the computer name shown on top of the Sharing screen in System Preferences. In my case the URL would look like http://Yakov.local:8000
What’s left? To deploy your Web applications under any Web server that runs on any port but 80. It doesn’t have to be internal Apache Web server. As I said before, you can use Tomcat or any easy to install and start Apache Server packaged with XAMPP (again, change the port).
Disclaimer 2. I don’t know why the internal server that comes with Aptana IDE and runs on port 8020 still doesn’t respond to my iPhone-USB setup. If you do, please let me know.
But the good news is that you don’t have to use the internal Web server with Aptana IDE. you can configure it to use Apache Web – I’ve described the process in Chapter 5 of our upcoming book on Web development in the sidebar “Configuring Aptana IDE to use Apache Web Server”.
Do you know if a similar setup is possible with Android devices without the need to install any heavy SDKs?