How to open an HTML project on the iPad

Question

I have an HTML project (CSS/JS/jQuery) that I'd like to test on an iPad (in Safari). From what I've read, iOS browsers don't support the file:///path/to/project protocol, and even if it did, I don't believe that you'd be able to navigate the file system to where your project is located.

Please correct me on any of this information if I'm wrong, I'm an Android guy so much of this is new to me. Nonetheless, I tried to use an app called Fileapp to solve my problem. I was able to access and load my project, but it was within Fileapp's native browser, and not Safari (unless it actually WAS Safari and it was just masked).

Does anybody know of a solution to my problem (preferably free)?

Solution 1

2016 UPDATE:

There are several services which now make this easy. If you don't have your own web server check out one of these free services which make updating a live webpage from your PC easy:

Heroku

Git Pages

Both of these services require using git, learn it, you won't regret it.

Days of FTPing or using Dropbox to serve html to an iPad are long gone.

If you need to be able to do this while not connected to the internet check out this article on using local IP tunneling. This would essentially open up the localhost on your PC to be viewed by anyone on a wifi network, regardless of if the wifi was actually connected to the Internet.

http://wesbos.com/localhost-mobile-device-testing/

I prefer Heroku as I am more likely to be switching between locations and PC's than I am to be on a wifi network without an Internet connection.

OLD ANSWER 2012

Get a Dropbox account and put the project in your public folder.

Right click to get the public link and then browse to that location on your iPad.

---

When I get link from the iPad app it doesn't work it just shows the raw html with a URL structure like so

dropbox.com/s/...

When I go to the website and copy public link (only available if the file is in PUBLIC FOLDER) I get the link that actually works.

Solution 2

The answer to your question is that even with iPadOS the iPad is not a replacement for a Windows, Linux, or Mac. Still too many “can’t get there from here” cases.

Solution 3

Apache probably isn't the most convenient webserver to use for this kind of ad-hoc serving of a local project. Instead, if you're on Mac or on a Linux distribution that has Python installed (which is most of them), you can launch a webserver to serve your current working directory at the terminal with a one-liner:

python -m SimpleHTTPServer

By default it will serve on port 8000; you can specify another port by passing it as a final argument to the command.

To connect to this server from another device, like your iPad or phone, first of all you'll need to make sure your phone is connected to the same local network as your Mac or Linux PC. Then, on the computer, run

ifconfig

and look through the output for your local IP address, which will be labelled as inet addr in the output and listed under one of the connections other than "Local Loopback". On my current PC, I see inet addr:192.168.0.3 listed under the wlan0 connection.

Now, on your phone, open your browser of choice and navigate to the IP address you got from ifconfig on whatever port SimpleHTTPServer is serving on. For example, http://192.168.0.3:8000. You'll be presented with a directory listing corresponding to the directory in which you launched the server, and from there you can view whatever files you're interested in.

Comments

[vdelricco]

I've tried several things using dropbox, including your idea, and none worked unfortunately.

[Philip Kirkbride]

It works for me with iPad projects. What happens on Safari when you open the URL?

[Philip Kirkbride]

What is your user # and the name of the file you want to open. I can send you the working link.

[vdelricco]

Just to make sure we're on the same page, I'm right clicking on the project folder, and clicking "get link". it then takes me to a page with a unique URL and it displays all the files/folders in the project folder. So i type this unique URL into the Safari, and it shows the same page. I then click on the "index" page of my website, and it just shows the source code, it doesn't render as an HTML page.

[Philip Kirkbride]

You need to make sure your getting 'public link' and not just 'get link' I believe. Is the file in yoru public folder?

[Philip Kirkbride]

I added a working html file in my public dropbox to prove this works.

[vdelricco]

I'm sorry for the confusion, I actually didn't have the project folder in my public folder. Stupid oversight on my part. I now have the project working via dropbox as well as the apache server. Much thanks to you.