Uploading a Unity Webgl Build to Dropbox 2019

• Blog
• Forums
• Answers
• Evangelists
• User Groups
• Beta Program
• Advisory Panel

Search Unity

Unity ID

A Unity ID allows you to buy and/or subscribe to Unity products and services, shop in the Asset Store and participate in the Unity community.

• Forums

• Menu

1. UPDATE: Due to new dropbox rules, you lot can no longer host games on it. :<
   Other sites like google bulldoze should work though, simply needs to be replaced by the right url!

   Take you ever wanted to add your WebGL game to a service like dropbox, or whatever similar services for others to play in a browser? Me too!
   Then, i take made a simple tutorial on how to make this work, every bit if you are playing it locally!

   Since in Unity five.4 WebPlayer will no longer be supported, i have decided to practise this in-depth tutorial on how to make your game work in WebGL for anybody to play, pace by step.

   The showtime thing to do is get in the Editor and Build your actual game in the WebGL platform in a binder, named appropriately(most normally your game or visitor proper name).
   

   --
   Afterward that, we Upload the whole folder in dropbox by copying(or cut) the binder we have created, with our built WebGL game in it.
   

   --
   After the upload is done we copy the .html file'southward dropbox URL and effort out if the link works.
   
   --
   But look! What is this? It seems that our game does not load itself, but gives usa a download to our html file.
   This is where this tutorial will shine(i really wanted to write that, sorry )

   The first thing you need to know, is that dropbox.com is Not our base url we need to be using.
   Instead, we demand to use dl.dropboxusercontent.com - this is the actual base of operations url for the user to be able to load the files, instead of downloading them!
   And if you lot want to make information technology a scrap cleaner(because nosotros will be using this a lot, you can remove the cease of the url: ?dl=0 - information technology is not required).
   
   --
   Now instead of showing u.s.a. to download it, it loads our html file!
   Merely at that place is still more work to do!

   As y'all can see, our game is not loading, and there is no window at all, only some text on top and bottom of the page, and our 'created by Unity' text on the very bottom.
   For us to gear up this, nosotros need to get our easily muddied!

   We need to open up our .html file that we uploaded with an editing plan. Im using Visual Studio for this.

   
   Inside it, nosotros volition encounter some code that most of us dont empathize, but there is all the same some logic we tin can understand in there!
   We need to edit all our file paths, by replacing them with our dropbox files's URL links. First fourth dimension is always the hardest, but dont worry, it gets easier over time!
   Dont forget to use dl.dropboxusercontent.com instead of the original dropbox.com URL.

   
   And in this picture we take our fully edited html file how it should be in club for information technology to load our game.

   Note that where the files take 'gz' at the stop in the Release binder in their file type, you must remove the 'gz' part in the edited URL. Otherwise it will give yous an mistake when trying to load the game using our edited URL.

   Nosotros must do the same for the UnityProgress.js file establish in the TemplateData binder.
   

   And when reloading our page that nosotros tried with our edited html link, we see that our game works and its loading!

   
   --
   Congratulations!
   Nosotros successfully managed to build, upload, and edit our WebGL game for the world to play!

   And for those who desire to try out the WebGL tests game i have made, here information technology is!

   Last edited: December 23, 2016

2. All working dandy, but this error
   'Failed to load resources: the server responded with a status of 403 (Forbidden)'
   pops upwardly two times. Information technology does non break anything though.
   First fourth dimension is that it cannot discover logo.png (NOT progresslogo.png), but I tin't seem to notice the place where to correct the path...
   Second time is the 'codeURL' variable (.jsgz). I specified the right path without the 'gz' at the end, and he throws the fault - adding the gz into the path causes the other ii files to throw an error. I can manually download it though when adding the gz.

   It'due south non breaking annihilation, but non very squeamish.
   If you need to bank check, this will give you lot the errors.
   Thanks for the tutorial anyway

3. It loads only fine for me. Have you lot tried using different browser?

4. I tried it in Chrome showtime, which throws the errors mentioned above. Full log in chrome:
   
   Once again, content loads just fine despite these errors.

   In IE, this bulletin pops up:
   
   If I continue anyway, IE crashes...
   If I wait for it to load before I click ok, I can run it fine with the following log:
   
   So seems to work without the errors mentioned before on IE.

   In Firefox, I can't seem to become information technology to work at all. Curiously, it shows this:
   
   Funny enough, considering I do run on Firefox already. Information technology likewise throws errors that it can't create GL context, which should only appear if my setup is unsupported, just I already checked, it is not marked as unsupported on the firefox pages...

   Anyway, my initial trouble seems to merely announced in Chrome...
   I'll try if any of these bug is related to my built or If I experience it in other demos, too.

   Edit: Nonetheless for your demo, besides (respective errors)
   I also go out of ram on IE in your demo...
   Atleast it'southward not strictly my faultxD

5. I think your browsers might have some restrictions towards loading content and memory limit. Im sadly not sure which they are, but you could try installing IObit Advanced Systemcare and running a full scan. Theres a free version of each of their plan, and they normally have some great value fixes that make your computer run faster.
   If with the changes the program did did not work, the best thing you could do is try and research in google equally of why its doing this to you.

7. Your PC may have 16gb of ram, but the browser's limit might exist 1gb, maybe even less.
   From what i remember, iobit unlocked my limits(yous could probably practice it manually merely im non sure where the settings are at)

8. nevaran Thanks you very much for your gide .

   Hi I am attempt to set my game in facebook sheet with WebGL following your guide , but i am getting this fault "Uncaught SyntaxError: Unexpected token ILLEGAL" run across the image.JPG in Creme brouser ,firefox and explorer.

   Any helps are appreciated ¡

   Attached Files:

   • 

9. Editing program y'all are using might be giving wrong symbols, or y'all missed something in the editing the URLs

10. Thanks navaran

    I have using the free drib box , in this don't have pinch system . Now i upload to paid server and this work

11. Thats nice to hear Thanks

12. First of all, it works peachy! Thanks for this post!
    2nd of all, if you are a completionist like me, there'due south some other link, within the style.css file, at that place's the url(logo.png) office. Merely put in the full logo path in parentheses (ie. url("https://dl.dropboxusercontent.com/due south/blablabla/logo.png")). It shows the WebGL logo on the bottom left

15. Thanks a lot for sharing!

16. Cheers a lot for sharing, great tutorial!
    @Efect I got the same error at first attempt, and then I read the original post more than in depth:
    this definitely solved the problem and now a web demo of my game is bachelor at https://dl.dropboxusercontent.com/s/6phaxh1qbsh03s9/index.html

    Thanks again!

17. Hi,
    Y'all can as well upload your WebGL games on a free game hosting site, CheeseGames.cyberspace

18. Anywhere is possible every bit long as it supports links to the files similar to dropboxs'

19. I can't seem to get the dl.dropboxusercontent.com to work and I accept no idea what I'm doing wrong. I've tried multiple times (with and without the 'south' in https) and it all the same won't work. Any idea? Thank you

20. I am not absolutely sure, just i recollect it may have to do with the ability to use public folders? I havent tried putting the WebGL game before ive gotten that, so it may exist that.
    Have you fabricated sure every single file referenced is set with the url? Note that y'all must use dl.dropboxusercontent.com to the html file that loads the game also

21. Hey, I have tried this and information technology works, until now. For some reason, all the games take gone down, information technology merely says "An error occurred running the Unity content on this page. See your browser'southward JavaScript panel for more info. The mistake was:
    SyntaxError: illegal character" and I don't know what to do , I am trying to rebuild the game so I volition come across if it works then
    run into ya
    EDIT: "Sadly It does non work ;("
    -Sinci1

    Last edited: Feb 26, 2019

22. Adept to hear im not the only one! Something might've happened in the recent updates, maybe? It might be a bug, not a bad idea to report it.

23. hmm perhaps? but i dont know how to report
    -Sinci1
    Edit: I recollect its because of dropbox, considering if yous keep some other page similar http://world wide web.cheesegames.net unity games Will work, hmm this is really strange

    Last edited: May 22, 2016

24. They might accept made information technology and so you cannot practise information technology on dropbox anymore, sadly...Merely hey, deceit blame them! Haha

25. Hey can yous report this to unity?
    or
    Tell me a practiced dropbox altrnative that supports directly links?

26. Its not unity's fault - the local build works merely fine. Its after converting information technology in dropbox that destroys everything. We could wait for dropbox to set up it or maybe starting time our own site folio thingie using Apache or similar.

27. Hey, I got skilful news! I constitute an culling to dropbox... Google bulldoze!
    for a tutorial (not made by me) hither it is :

    Last edited: February 26, 2019

28. Howdy nevaran and Sinci1.

    The reason why your build does non launch is considering currently dl.dropboxusercontent.com serves file content based on the url folder and ignoring the bodily filename. Compare for example, responses from:
    https://dl.dropboxusercontent.com/s/ssiem6hzh6tdz09/style.css and
    https://dl.dropboxusercontent.com/due south/ssiem6hzh6tdz09/anything

    The Unity loader therefore has no style to know that your server is serving compressed content, because the loader receives compressed data on the request for uncompressed file, instead of the 404 error that it would normally expect for a missing file.

    To resolve this result, you can manually disable requests to uncompressed content and force the Unity loader to always employ JavaScript decompression. You tin reach this past calculation the post-obit compatibilitycheck handler to your Module object in the index.html:

    3.     errorhandler: naught ,// arguments: err, url, line. This function must return 'truthful' if the error is handled, otherwise 'false'
    4.     compatibilitycheck: office ( ) { LoadCompressedFile = DecompressAndLoadFile; CompatibilityCheck( ) ; } ,
    5.     dataUrl: "https://dl.dropboxusercontent.com/southward/kkpumk96vjwpvef/cube.datagz" ,
    6.     codeUrl: "https://dl.dropboxusercontent.com/southward/oahon4esarsvcmm/cube.jsgz" ,
    7.     memUrl: "https://dl.dropboxusercontent.com/southward/npdybzbcgcgriyk/cube.memgz" ,

    Then the build should run as expected (tested on 5.4.0b10, some versions might crave minor adjustment). Let me know if you need any assistance with this.

    Dropbox hosted spinning cube demo: https://dl.dropboxusercontent.com/s/lu4f1b3sos3mfgm/index.html

    Last edited: May 30, 2016

29. Thanks for your response, withal i am going to use google drive because it comes with 15 gb infinite, Give thanks you again.

    Last edited: Feb 26, 2019

30. Hey! Thanks for explaining the trouble - i got to the same conclusion but didnt knew how to fix it.
    Your demo works merely for some reason mine doesnt do the same. Im using unity 5.three.10
    Y'all can endeavour it out here: https://dl.dropboxusercontent.com/s/9ccs5r2hesmbd33/ModernFPSKitDEMO.html

31. Hello nevaran.

    I will endeavor to explain the basic idea behind all this, so that you will exist able to create your own workaround for any Unity version.

    And so, we got a standard way of downloading WebGL content implemented in UnityLoader.js. However, the dropbox server does non act as standard server and instead of returning 404 for a missing file, information technology is serving some other file from the same folder. And then we need to adjust the UnityLoader.js to deal with this nonstandard behavior. For example, this can be achieved past overriding the LoadCompressedFile function with DecompressAndLoadFile office, but overriding tin be only performed at the moment when those functions are already defined, i.eastward. afterwards UnityLoader.js has been loaded. In the case above I was using the compatibilitycheck handler to inject JavaScript code into UnityLoader.js, equally this handler is called from the UnityLoader.js similar:
    
    Module.compatibilitycheck?Module.compatibilitycheck():CompatibilityCheck();

    And so, as you tin can see, in this specific case this has nil to practice with compatibility, it is rather merely ane of possible ways to inject your code into another js without modifying it. Unlike 5.iv, in the 5.3.4f1 version y'all are using, compatibilitycheck is called afterwards the files are already set up for download, so it is too late to override the download function. However, there are other ways to practice this (in addition to just serving uncompressed files, which will also work, just is boring and affects your express dropbox bandwidth), for example:

    1) Override the download function directly in the loader. I.due east. only put the post-obit line on the top of your UnityLoader.js:

    1. LoadCompressedFile = DecompressAndLoadFile;

    Then you lot volition get it working like this:
    https://dl.dropboxusercontent.com/s/segdmhfnhpnrea1/ModernFPSKitDEMO_override_loader.html

    2) If you don't want to modify the UnityLoader.js (for example, when y'all don't have admission to it), you can still perform some play tricks in the alphabetize.html. The chief html shares the Module variable with other JavaScript lawmaking, including UnityLoader.js. And, of course, the urls provided in the Module will exist accessed from the UnityLoader.js at some point, means that information technology is sufficient to just override a Module accessor in order to inject your code into whatever other JavaScript that is using this Module variable, for example:

    3.     errorhandler: nada ,// arguments: err, url, line. This function must render 'true' if the mistake is handled, otherwise 'fake'
    4.     compatibilitycheck: zero ,
    5.     dataUrl: "https://dl.dropboxusercontent.com/s/jegy3dr11nksez1/FPS%20Kit%20DEMO.datagz" ,
    6.     codeUrl: "https://dl.dropboxusercontent.com/south/4w075ll2m6m3mqe/FPS%20Kit%20DEMO.jsgz" ,
    7.     memUrl: "https://dl.dropboxusercontent.com/s/bs431tv4jeo5f0c/FPS%20Kit%20DEMO.memgz" ,
    10.   Module._codeUrl = Module.codeUrl ;
    11. Object.defineProperty (Module, 'codeUrl' , { become : office ( ) { LoadCompressedFile = DecompressAndLoadFile; return this._codeUrl; } } ) ;

    So you volition become it working similar this:
    https://dl.dropboxusercontent.com/s/aj6ea0tpynfuxy7/modernFPSKitDEMO_override_accessor.html

    Of course, such a nonstandard arroyo should only be considered in a nonstandard situation, when there is no other way to resolve it. Hope this helps.

32. 
    Very nice! I have tried the first trick and works similar a charm.
    Many thanks for resolving this event!
    Cheers

    PS: removing the 'gz' in the url file types or leaving them alone doesnt seem to affair, or does it?

33. In this specific case not only extension, merely also the whole filename does not matter. As has been noted before, in example of dl.dropboxusercontent.com you can equally well just put i.e. https://dl.dropboxusercontent.com/southward/ssiem6hzh6tdz09/anything there. Although I would of course exit some meaningful filename in guild to differentiate the links.
    In most other cases you would just utilize the default generated index.html (without manually added suffixes or other modifications).

34. Alright, gotcha - thanks a lot for helping out!

35. THIS IS MINT!!! takes near a tenth the time, and no matter how hard my school tries, they cant block google drive!

36. hullo. I didi all part except removing "gz", was non able to find it.. actualy found "gz" in unityloader.js and fabricated information technology like a annotate (//url += "gz"; ) but i think it is wrong way. pls tin u help to solve problem.
    Here is screen what i am geting with dropbox link

    Attached Files:

    • 

      err.jpg

      File size:

      161.8 KB

      Views:

      912

37. Hello Tiranus.

    For Unity v.4 and higher up y'all can follow this guide:
    http://forum.unity3d.com/threads/tu...me-go-live-using-dropbox.376471/#post-2655512

    For Unity 5.three you tin follow this guide:
    http://forum.unity3d.com/threads/tu...me-go-live-using-dropbox.376471/#post-2663575

    As has been mentioned higher up, filename and file extension should not make any deviation, as only the folder proper name matters according to the latest changes in dropbox.

    P.S. in improver to the WebGL content links, you may also want to replace the style and images links for your alphabetize.html and UnityProgress.js, for example:

    1.     <link rel="stylesheet" href="https://dl.dropboxusercontent.com/due south/ssiem6hzh6tdz09/manner.css">
    2.     <link rel="shortcut icon" href="https://dl.dropboxusercontent.com/south/3a25v9x7sgz6km3/favicon.ico" />
    3.     <script src="https://dl.dropboxusercontent.com/s/7ym6fjas2h62565/UnityProgress.js"></script>

39. akuno

    

    Joined:

    Dec 14, 2015

    Posts:

    46

    I am having a problem with my game, I tried all the fixes above.
    https://dl.dropboxusercontent.com/south/tb6x6vhkzm7lm4k/index.html

    Whatever thought how to fix it?

40. Hullo akuno.

    The solution provided above did not work for you lot because you lot are using a newer revision of Unity.
    Instead of overriding the Module.codeUrl try to use the post-obit code for injection:

    1. Object.defineProperty (Module, 'memoryInitializerRequest' , {
    2. get : function ( ) { render this._memoryInitializerRequest; } ,
    3. set : role (value) { LoadCompressedFile = DecompressAndLoadFile; this._memoryInitializerRequest = value; }

    Annotation that specific code does non matter hither, the only thing that nosotros are trying to reach is to override the LoadCompressedFile office after it has been parsed and before it has been executed the get-go time. In your specific instance there is for example a Module.memoryInitializerRequest access, which nosotros tin can use for injection of the code. Allow me know it this helps.

41. akuno

    

    Joined:

    Dec fourteen, 2015

    Posts:

    46

    Thanks for the reply I volition effort equally shortly as I get habitation

42. It seems that Dropbox has changed the way their organisation handles files and this method no longer works. For kicks, I reverted to the www.dropbox.com default on the principal index page and it served the basic html and styling without the thespian, nevertheless, attempting to revert the other links within the webGL build borked the whole thing (as expected). Hopefully someone with more experience and/or knowledge can sort this out and it'south non the death of Dropbox hosting for testing purposes.

43. Hello gauge2727.

    Yes, you are right, information technology seems that they accept inverse this just recently, fifty-fifty though it was working fine concluding calendar week. Now there is a Content-Disposition: attachment header present which enforces the download dialog. Y'all mentioned you were able to open the html using dropbox.com link instead. Could you provide an example of such link that opens html directly?

44. @alexsuvorovdv - all I did was revert to the default www share link instead of the dl.usercontent on the index page. This will go it to serve the basic HTML and style sheets, and so the other dl.usercontent changes suggested still announced to exist handled decently, simply it doesn't load the webGL player at all. I tried this alter with 3 projects to make sure information technology wasn't a fluke and can get the index.html to load in the same style. You should be able to do it with whatever of yours as well, but here's a link to 1 of mine that I made the alter with anyway, simply to demonstrate information technology serving the folio. https://www.dropbox.com/s/mg28irei14czoxl/alphabetize.html

    *** EDIT ***

    I'm guessing it has something to do with this error that shows upward in panel on inspect of the loaded html

    "chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js:346 Blocked script execution in 'https://dl.dropboxusercontent.com/c...DRnG3FRVdE6k1MT8Bvr2io6hsV347YHlOFmHZhR9/file' because the document's frame is sandboxed and the 'let-scripts' permission is non set."

    *** EDIT 2 *** It seems that the link I provide now returns a "can not preview" download interface, and so I'm at a loss.

    Equally a side-annotation, I'm using my personal, temporary solution and so I don't lose testing workflow. By moving an unchanged re-create of the index.html files for my projects to another deject (mega.nz) and using the "stream" characteristic on their desktop customer, I can load and test projects that are establish in dropbox. Not a perfect solution, but every bit a solo hobbyist it keeps things moving.

    Hopefully Dropbox can be sorted out or we (the customs) can come up with an alternative before long. I know I'll be keeping an eye on this thread as I have since it was created, haha.

45. Yes, that is exactly what I've been seeing as well. It is non broken though. This Dropbox change seems to be intentional. I accept institute things like that on the spider web (from September 1st, 2016):
    Basically, the simply thing you need is the browser to straight display the index.html hosted on a public drive. Once you tin accomplish this, you will most likely be able to run Unity WebGL build from such a public drive every bit well.

    P.S. Your approach is very reasonable. Equally long as Dropbox provides proper CORS headers, you can merely use some very basic hosting to serve the html file, while the rest of the build can be hosted on Dropbox.

46. Hi... i wanted do upload and run a webgl demo from DropBox, however i wasn't able... i went through the posts and i come across that there are some changes about dropbox... Any way now to run a WebGL demo from DropBox ( using Unity 5.four.1 and up) or is there any other alternative to dropbox i can put the demo on...!?

47. Hello Vagabond_.

    As has been mentioned above, the problem is not that Dropbox does not host WebGL content, simply rather that Dropbox does non host HTML content the same way as before (at present information technology is served as attachment). There are a lot of hosting providers that allow yous host your content and give you a subdomain for free. The simply trouble with such providers is that they have limited bandwidth. And so, you tin host just your index.html file on a complimentary hosting and all the other build files (including .datagz, .memgz, .jsgz) on Dropbox (using the guide provided in a higher place). Then yous will accept minimal bandwidth usage for your HTML hosting, every bit all the build files will be served from Dropbox.

    P.S. In that location are also some other suggestions in this thread about alternative hosting possibilities.

48. Ok, it'southward now articulate.
    And thank you for suggestions

49. Yeah, I got an email from Dropbox around the time I posted to this thread that said that. Sort of annoying, but not the end of the world. I don't suppose you've experimented with Nextcloud/Owncloud in an effort to replicate the former HTML rendering of Dropbox? I know in virtually situations it might seem pointless, but I tin recall of several where this would be an adequate solution. I'1000 merely not sure how much work would go into it, and it'due south non exactly something I have much knowledge in.

50. Hi, just upload the index.html file, templatedata folder, and release folder to cheesegames.net. Then demo or share the URL of the game from in that location. You tin can go on updating the game build files and and then remove it afterwards yous're done. It's likewise quite interesting to bank check out the Unity3D games that other developers are showing off or testing at that place.

caronobtlyn.blogspot.com

Source: https://forum.unity.com/threads/tutorial-making-your-webgl-game-go-live-using-dropbox.376471/

Share this post