Local Server Mobile Prototype Viewing: Part 1 - WAMP on Windows
Lately I have been experimenting with delivering prototypes to mobile devices via local-to-computer installations of web servers, and I wanted to share with you my findings so far.
There may be additional steps you need to take depending on your network setup, local computer security setup, and existing corporate user policies if any. Firewalls, router rules, and others may prevent you from using this approach. Do your research and obtain the appropriate IT permissions!
What It Can Do: Allows you to load mobile prototypes from a Windows machine to a mobile device
Free to use under GPL License
receiving mobile devices (ideally any), serving devices (Windows-based computers and laptops)
1. Saves time by not having to reload the prototype to a 3rd party service such as AxShare or Dropbox every time a change is made to the prototype.
2. The user has control of proprietary prototype information.
3. Great for demoing to clients in internal meetings.
1. See some sources of technical limitations as outlined in the DISCLAIMER above
2. Have not yet tested if this works for an Ad-Hoc WiFi setup.
1. Download and install WAMP: WampServer, the web development platform on Windows - Apache, MySQL, PHP. Make sure you grab the appropriate package for your system, 32-bit or 64-bit.
2. In C:/wamp/www, the publically viewable folder for WAMP, create separate folders for each prototype project e.g., project1, project2, etc.
3. When generating the mobile prototype (with the correct viewport settings), in the left-hand sitemap pane point to the appropriate path e.g., C:/wamp/www/project1/.
4. Start WAMP.
5. Left click WAMP icon, go to Apache -> http.conf and verify if 'Listen 80' line in text file reflects port 80. 6. Press Win Logo + R and type cmd
6. Type ipconfig and search for the IP address of your WiFi connection, let's say 10.0.0.10.
7. Verify that both mobile device and computer are on same WiFi network.
8. On the mobile device, type 10.0.0.10:80/project1/index.html to view the prototype (substitute your data in).
1. Green icon in the task bar means that the server is "online". You can test the connection locally by using "localhost:80/project1/index.html" or "127.0.0.1:80/project1/index.html" (replace with your data). If the icon is anything but green, left click and choose Put Online or Start/Stop All Services.
2. You can consult the Apache error and access logs for troubleshooting purposes. It helps identify if inbound connections even make it to the machine.
3. Verify if no other service is running on the same port as the Apache Web Server. Using the same command, cmd, type netstat -o -n -a | findstr 0.0:80. This will show you a list of services and their PIDs using port 80. Then use CTRL + SHIFT + ESC to start the Windows Task Manager and go to Processes to cross reference which applications the PIDs refer to.
I hope you find this first part of the 2-part series informative. Feel free to contribute your own tips and tricks if you have used this approach in the past.