Being able to quickly upload a HTML5 game to the web is important.
It's not just a more comfortable format for sharing, but sometimes a requirement, since games created with GameMaker: Studio, Construct 2, Haxe+OpenFL and many other tools may not necessarily fully function when launched locally due to browsers laying restrictions over local file access (meaning that sending a ZIP with game files may not quite work).
While it used to be possible to host HTML5 games on Dropbox for free (or, rather, it still is possible, but only if you have enabled the public folder before the late 2013, else it'll cost you some), you can still host HTML5 games freely on Google Drive.
And this article explains the process of hosting your games on Google Drive in detail.
First things first, you need to login to Google Drive (obviously). If you have a Google account, you should already have that set up automatically.
Then create a folder for your game using the self-descriptive button on the left-hand menu:
Location and name of new folder don't really matter, but you should generally try to sort your folders based on some criteria instead of dumping them in "root" folder.
Here I've created a folder for what's going to be a web demo of a slider from my "adding thousand separators" blog post. It's situated in a folder for current month, which, actually, doesn't contain anything else in this case, because I was uploading files elsewhere:
Now navigate to your newly created folder. Being newly created, it should contain nothing but a comfortable void:
Then upload your files. You can just drag them from your computer to the folder (viva la HTML5 File API), or use a upload button. Keep in mind that your index.html file should be at top level of the folder. Here, my application is just 4 files, which I've uploaded:
For folder to be accessible, you need to setup it's permissions and get it's ID. Both tasks are accomplished via "Share" menu item that you can access from folder menu:
A medium-sized window appears, providing you a link to the folder (we'll return to this later), a bunch of social buttons, and information on folder access:
Update (September 2014): Now a slightly different sharing window is shown (example), where you need to click "Advanced" first.
By default, folder access is set to "private", meaning that only you can access the contents. Since this is a folder with game, that is not the right option, and should be adjusted by clicking the "Change..." link next to it.
A slightly smaller window then appears, providing control over sharing options:
Here you need to set permissions to "Public on the web" + "Can view" and hit "Save".
Once "Save" is clicked, you are taken back to "Sharing settings" window, which will now display updated information.
While it may seem that all is done, the "link to share" is not the one you need though - that just displays the file list from folder, which is no help to running the game.
What you have to do, is instead copy the folder "ID" from URL,
And paste it at the end of "host" URL being
https://googledrive.com/host/
like so:
This is also the URL that you can later share with someone (example).
If you've done everything correctly, afterring hitting Enter the URL will change into a slightly longer one, and you'll see your game/application live:
And that's it. A link to the game can be later shared with players/potential sponsors/whoevever, and will work as long as the folder is on your Google Drive and has permissions intact.
Is it possible that it doesn’t work anymore(I think Drive had an update recently)? When I click on the link, it shows me the content instead of opening the index.html.
It should work fine (example from this post still does), but now that you mention it…
» There recently were several “hickups”, where websites hosted on Google Drive became inaccessible for a short while.
» Looking at it, apparently “Sharing” dialog has been changed recently, and now takes another click to get to settings. I’ve updated the post with information on this.
does not work does not….
When I click on the link, it shows me the content instead of opening the index.html.
It doesn’t work at 25 november 2014. there is no googledrive.com/host where you can paste the id(+/index.html)…and anyway when i click the link it shows the content instead of opening the index.html. The transformation of the link (in the navigation bar doesn’t happend)…your example works…because the link was created before the changes??
Still works here.
There’s a thing though – folders can take a few minutes to actually become accessible. And if you attempt to access them within that time, it gives you a 404 message and changes the link into “drive.google.com/host/…”, which will actually never show the files. So, ensure that you are not trying with a broken link, and/or do wait a bit.
Awesome article!!!
12/10/2014… just tried it and it works like a champ!
Thanks for writing this article!!!
-jerry
Great job man… Works perfectly… Thanks
I did that and it opens the game normally when i use the link but it stucks when its loading the game… Anyone having the same problem? I used construct 2 to make the game.
I don’t work with Construct 2 much so I don’t know it’s quirks, but you could at least check the JavaScript console for loading errors, then check if all required files are in place.
Thanks!
I checked the javascript and saw it couldnt find any images. I went back to drive and noticed you have to upload the folders separately. So it works now. Appreciate it (y)
why does not work with me
Thanks Mate, .. it’s work perfectly.
The author needs to update this more because there is no ‘Google Drive host’ any more; and after the sharing part, it actually becomes quite confusing for those who are visual.
This is actually quite complicated than it should be. I’ve been having a 404 error since this morning. Even me going on the forums isn’t working.
Pingback: Using Google Drive for Collaborating with Level Creators | Accidental Rebel