Hosting HTML5 games on Google Drive

Hosting HTML5 games on Google Drive for free

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:

Hosting HTML5 games on Google Drive for free: Creating a folder

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:

Hosting HTML5 games on Google Drive for free: Folder created

Now navigate to your newly created folder. Being newly created, it should contain nothing but a comfortable void:

Hosting HTML5 games on Google Drive for free: Navigated to folder

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:

Hosting HTML5 games on Google Drive for free: Application files 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:

Hosting HTML5 games on Google Drive for free: Finding the Share 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.

Hosting HTML5 games on Google Drive for free: Sharing settings.

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:

Hosting HTML5 games on Google Drive for free: Setting permissions.

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,

Hosting HTML5 games on Google Drive for free: Copying folder ID.

And paste it at the end of "host" URL being

like so:

Hosting HTML5 games on Google Drive for free: Forming the URL.

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:

Hosting HTML5 games on Google Drive for free: All done.

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.

Related posts:

29 thoughts on “Hosting HTML5 games on Google Drive

  1. I am getting the error below:
    500. That’s an error.
    There was an error. Please try again later. That’s all we know.
    Does this still really work?

      • Tried to upload a C2 game but doesn’t seem to work. Getting the error below now.
        404. That’s an error.
        The requested URL was not found on this server. That’s all we know.
        Thanks for the info anyways.

  2. I followed these instructions but as soon as I upload my game the index.html file gets flagged by Google “for abuse”. Has anyone else had this problem?

    I asked them to review the file but I don’t know how long that will take…

  3. Pingback: Using Google Drive for Collaborating with Level Creators | Accidental Rebel

  4. 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.

  5. 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.

  6. 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)

  7. Awesome article!!!
    12/10/2014… just tried it and it works like a champ!
    Thanks for writing this article!!!

  8. It doesn’t work at 25 november 2014. there is no 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 “…”, which will actually never show the files. So, ensure that you are not trying with a broken link, and/or do wait a bit.

  9. does not work does not….
    When I click on the link, it shows me the content instead of opening the index.html.

  10. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.