Search Unity

How to manually start a localhost version of WebGL build

Discussion in 'Web' started by douglassophies, Aug 5, 2019.

Page 1 of 2

  1. douglassophies

    douglassophies

    Joined:
    Jun 17, 2012
    Posts:
    141
    Clicking "build and run" on a WebGL game opens http://localhost:52334/ and allows me to play test.
    If i try to run the index file directly i get:
    "It seems your browser does not support running Unity WebGL content from file:// urls. Please upload it to an http server, or try a different browser."
    What is Unity doing with the "Build and run" button and how do i replicate it so i can run folders with old builds?
     
    douglassophies, Aug 5, 2019
    #1
    makaka-org, EllieD, PlayAndGo and 2 others like this.

  2. Schubkraft

    Schubkraft

    Unity Technologies

    Joined:
    Dec 3, 2012
    Posts:
    1,073
    Unity is starting a simple local webserver when you us build&run. Most browsers restrict loading from file:// for security reasons.
    You can server old builds from a local server yourself. Try IIS or the free apache or the quick http.server that comes with a python install.
     
    Schubkraft, Aug 6, 2019
    #2
    makaka-org and russisunni like this.

  3. douglassophies

    douglassophies

    Joined:
    Jun 17, 2012
    Posts:
    141
    Thanks for the info Schbkraft. Setting it up and working through all the little issues now.
    There is no way to get Unity to call its simple server functionality on demand rather than only at the end of a build and run command?
     
    douglassophies, Aug 6, 2019
    #3
    pragmascript likes this.

  4. Schubkraft

    Schubkraft

    Unity Technologies

    Joined:
    Dec 3, 2012
    Posts:
    1,073
    No, there is no button for that, sorry.
     
    Schubkraft, Aug 7, 2019
    #4
    douglassophies likes this.

  5. jRocket

    jRocket

    Joined:
    Jul 12, 2012
    Posts:
    700
    You could probably make an editor script to fire it up. I think the win executable is located at 
    Unity\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\SimpleWebServer.exe
     
    jRocket, Aug 8, 2019
    #5
    BlissfulCarbon, AnomalusUndrdog, AmitTiwari4Unity and 3 others like this.

  6. kognito1

    kognito1

    Joined:
    Apr 7, 2015
    Posts:
    331
    Firefox let's you use "file://" by default iirc and you can do the same in chrome with setting a flag.

    In general you can get IIS setup locally fairly easily (included with Windows, just not enabled by default). I personally use mamp (https://www.mamp.info/en/) when I'm abroad and don't have access to our servers.
     
    kognito1, Aug 8, 2019
    #6
    Hypertectonic and douglassophies like this.

  7. vizgl

    vizgl

    Joined:
    Nov 4, 2014
    Posts:
    61
    I tried this method and it not working. When I start webserver with arguments:
    SimpleWebServer.exe "path to build index.html" "port"
    and then go to url localhost: port I got 403 Forbidden response.

    Also got messages in the console:
    Starting web server at http://localhost:58505/
    Handling request: /
    Forbidden.
    Handling request: /favicon.ico
    Forbidden.
     
    vizgl, Nov 18, 2019
    #7

  8. ivanngoc

    ivanngoc

    Joined:
    Nov 9, 2018
    Posts:
    9
    firefox => url => about:config
    change
    "privacy.file_unique_origin" to "false"
    chrome add to link
    --allow-file-access-from-files
    => "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files


    Then open index.html
     
    ivanngoc, Nov 21, 2019
    #8
    smaggams, ravenpuff78, Ehredt and 3 others like this.

  9. vizgl

    vizgl

    Joined:
    Nov 4, 2014
    Posts:
    61
    Thanks. But I took this code https://gist.github.com/aksakalli/9191056 and run my own web server while testing webgl builds
     
    vizgl, Nov 24, 2019
    #9

  10. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Another way to run an ad hoc web server is to use Emscripten's "emrun" tool, which is designed to host WebAssembly-compiled pages.

    1. Download https://raw.githubusercontent.com/emscripten-core/emscripten/incoming/emrun.py and https://raw.githubusercontent.com/emscripten-core/emscripten/incoming/emrun.bat and place them to a directory you have in PATH environment variable.
    2. Navigate on command line to a directory you want to host, and type

    emrun --no_browser .

    to host that directory. Note the "." as the last argument, which means "current directory".

    If you want to also automate launching the page in a browser, you can execute e.g.

    emrun --browser="c:\program files\mozilla firefox\firefox.exe" .
     
    jukka_j, Nov 27, 2019
    #10

  11. friuns3

    friuns3

    Joined:
    Oct 30, 2009
    Posts:
    307
    you can actually decompile SimpleWebServer.exe with dnspy and see why it gives 403 error

    i removed this part of code and it start to work

    Code (CSharp):
    1. bool flag4 = !context.Request.IsLocal;
    2.                 if (flag4)
    3.                 {
    4.                     Console.WriteLine("Forbidden.");
    5.                     msg = "<HTML><BODY>403 Forbidden.</BODY></HTML>";
    6.                     response.StatusCode = 403;
    7.                 }
     
    Last edited: Jun 3, 2020
    friuns3, Jun 3, 2020
    #11

  12. Poindexter

    Poindexter

    Joined:
    Aug 16, 2011
    Posts:
    21
    Tested on Unity 2019.4.7f1. Create a batch file with content below, adapting for path differences:

    Code (batch):
    1. C:
    2. cd "C:\Program Files\Unity\Hub\Editor\2019.4.7f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten_Win\python\2.7.5.3_64bit"
    3. python.exe "C:\Program Files\Unity\Hub\Editor\2019.4.7f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten\emrun.py" "[PATH TO index.html GENERATED DURING BUILD]"
     
    Last edited: Aug 31, 2020
    Poindexter, Aug 31, 2020
    #12
    ZephyrK and WillJey like this.

  13. Koyae

    Koyae

    Joined:
    Feb 5, 2015
    Posts:
    3
    Poindexter's approach may work if you have a 32-bit version of Python installed separately, but in my case I get "ModuleNotFoundError: No module named 'win32api'"

    What I found works better is one of the below, where <old_WebGL_output_dir> is the path to the previous WebGL build you want to look at...

    If you do not have Python installed separately from Unity, you can use the included version which will look something like this (you may need to adjust the path to python.exe for your current version of Unity and the version of Python bundled with it):
    Code (batch):
    1. cd /d "<old_WebGL_output_dir>"
    2. "C:\Program Files\Unity\Hub\Editor\2019.4.7f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten_Win\python\2.7.5.3_64bit\python.exe" -m SimpleHTTPServer
    If you have Python 2.x installed separately (check in CMD with python --version) you can simply do
    Code (batch):
    1. cd /d "<old_WebGL_output_dir>"
    2. python -m SimpleHTTPServer
    If you have Python 3.x installed separately then it's even simpler:
    Code (batch):
    1. python -m http.server --directory "<old_WebGL_output_dir>"
     
    Koyae, Dec 16, 2020
    #13
    ModLunar likes this.

  14. gtk2k

    gtk2k

    Joined:
    Aug 13, 2014
    Posts:
    288
    gtk2k, Mar 1, 2021
    #14
    cathode26, brian-nielsen, GandiniS and 17 others like this.

  15. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,411
    does anyone know why running the included SimpleWebServer.exe manually doesnt work (403 forbidden),
    but if you de-compile & build new exe yourself in VS, then it works fine..? (has exact same c# code)
     
    mgear, Mar 11, 2021
    #15
    Tymianek likes this.

  16. adamgolden

    adamgolden

    Joined:
    Jun 17, 2019
    Posts:
    1,555
    For Windows, I've been using WampServer for at least a decade with everything imaginable, and it has always worked great for me, including for Unity WebGL builds. You install it, add a folder like C:\wamp64\www\unity\, then build your WebGL project right into a folder there (or if it's somewhere else just cut/paste it to there). Then if your project build folder is called "my_project", your files locally would be at C:\wamp64\www\unity\my_project\. And you would open it in a web browser at http://localhost/unity/my_project :)
     
    adamgolden, Mar 11, 2021
    #16

  17. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,411
    i've always been a Xampp guy :D that of course work great, (theres portable Xampp too),
    but trying to make tool to run web server manually.

    *and got it working, runs fine from commandline through mono:
    Code (CSharp):
    1. "C:/Program Files/Unity2019_4/Editor/Data/MonoBleedingEdge/bin/mono.exe" "C:/Program Files/Unity2019_4/Editor/Data/PlaybackEngines/WebGLSupport/BuildTools/SimpleWebServer.exe" "X:/YourProj/Builds/" 60606
     
    mgear, Mar 11, 2021
    #17
    Noisecrime and cxode like this.

  18. RealityDotStop

    RealityDotStop

    Joined:
    Mar 4, 2013
    Posts:
    42
    Tried it today, and it was working fine, no need to recompile (2021). I used Edge (the newer chromium one) and

    Code (CSharp):
    1. SimpleWebServer.exe "Path to FOLDER containing index.html" port
     
    RealityDotStop, Apr 10, 2021
    #18
    TerminalJack, Erishno and JamesArndt like this.

  19. e20lazaro

    e20lazaro

    Joined:
    Feb 6, 2018
    Posts:
    1
    Hi! This conv has been super helpful. I do have a question, is there any way to create a permanent server/link from a webGL build? Hope my question makes sense. If only 3rd party's can do that I would prefer it if it can use something that can only be accessible through a private link rather than a public server, I just want to create a link/server similar to how nunu studio does it with their exports. If anyone knows anything about that I would appreciate the help on that! Thanks
     
    Last edited: May 3, 2021
    e20lazaro, May 3, 2021
    #19

  20. Lz_Yahya

    Lz_Yahya

    Joined:
    Jan 24, 2020
    Posts:
    7
    Here is my simple solution for you guys.
    I am using windows 10 and unity 2021.1.16f1
    1. Open CMD : HOW TO OPEN CMD
    2. Write this line : Cd C:\Program Files\Unity\Hub\Editor\2021.1.16f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools 1.jpg
    3. Then Write : SimpleWebServer.exe "HERE THE PATH FOLDER OF YOUR WEBGL BUILD" 8000 2.jpg 3.jpg
    4. Now open your browser and Write : localhost:8000 4.jpg
    Voila your game is live in local server.
     
    Lz_Yahya, Aug 30, 2021
    #20
    dhtpdud528, Miguim, Maloke and 36 others like this.

  21. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,411
    also added quick webgl server start context menu to custom launcher
    (works per project, no need to select or type build folder)
     
    mgear, Aug 30, 2021
    #21
    ryan-at-melcher, radiantboy and jRocket like this.

  22. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    1,633
    Man that is so useful thanks!
     
    radiantboy, Oct 11, 2021
    #22
    Next1on and munkiki7 like this.

  23. zodok

    zodok

    Joined:
    Jan 12, 2019
    Posts:
    2
    hot it on wampserver www folder and set it as a new virtualHost
     
    zodok, Nov 14, 2021
    #23

  24. gchetan15294

    gchetan15294

    Joined:
    Jul 7, 2021
    Posts:
    2
    Tried but its showing as Access is denied
     
    gchetan15294, Nov 29, 2021
    #24

  25. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,411
    mgear, Nov 29, 2021
    #25

  26. DungDajHjep

    DungDajHjep

    Joined:
    Mar 25, 2015
    Posts:
    201
    DungDajHjep, May 11, 2022
    #26

  27. yssoh23

    yssoh23

    Joined:
    Aug 3, 2022
    Posts:
    1
    Here's an easy way. Just two steps. No command typing.

    1. Open the WebGL build output directory with VS Code.
    2. Right-click index.html, and select "Open with Live Server". (Install the "Live Server" extension first.)
     
    yssoh23, Aug 4, 2022
    #27
    MousePods and gasppol like this.

  28. Lz_Yahya

    Lz_Yahya

    Joined:
    Jan 24, 2020
    Posts:
    7
    Hey everyone!

    I wanted to share a solution I developed for the local hosting problem when testing Unity WebGL builds. I've created a user-friendly Windows application that simplifies the process. All you have to do is provide the path to your WebGL game, and with just one click, the app will host your game locally!

    You can find the app here: https://uusoft.itch.io/unity-webgl-local-hoster

    It's completely free and open source. I hope it proves useful to fellow Unity developers out there. Give it a try and let me know your feedback! Happy game development!
     

    Attached Files:

    Last edited: Jul 30, 2023
    Lz_Yahya, Sep 6, 2022
    #28
    GandiniS, ArmadilloGameArts, jroeder_unity and 1 other person like this.

  29. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    1,633
    AWESOME! thanks!!
     
    radiantboy, Sep 6, 2022
    #29
    Lz_Yahya likes this.

  30. gasppol

    gasppol

    Joined:
    Feb 16, 2020
    Posts:
    33
    Thanks, best way for me
     
    gasppol, Sep 28, 2022
    #30

  31. MayMih

    MayMih

    Joined:
    Dec 23, 2022
    Posts:
    1
    Unfortunately, Can't find such extension for VS Community 2022, so I created Batch-file (you can place in anywhere) with one string (port number on your choice):
    SimpleWebServer.exe "%~1" 6060

    After that, create windows shortcut for that batch file inside folder
    Unity\Hub\Editor\2021.3.16f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools

    Make sure shortcut's working folder is the same as the path above.

    Place copies of this shortcut wherever you want and when you need to launch webgl folder just drag it over that link.
     
    MayMih, Jan 17, 2023
    #31
    ybw2008cs likes this.

  32. ModLunar

    ModLunar

    Joined:
    Oct 16, 2016
    Posts:
    374
    The above solutions are helpful, but they either reference built-in Unity installation files, or have very long file paths and/or seem complicated.

    I'm a simple kind of guy, so I did this instead:

    Prerequisites:
    1. Python 3+ is installed.
    - Download latest from https://www.python.org/downloads​
    2. Basic knowledge of command line.
    - Be able to run basic commands, and navigate between directories.
    - You can use any terminal, but for example, I personally use Git Bash inside VS Code.​

    How to Run Your Existing Unity WebGL Build:
    1. Open a terminal at your build folder.
    2. Run the command:
    python -m http.server​
    3. Open one of the following URLs (they are equivalent) in a web browser:
     
    Last edited: Apr 4, 2023
    ModLunar, Apr 4, 2023
    #32
    muzakki839 and MrPapayaMan like this.

  33. DreamGameBD

    DreamGameBD

    Joined:
    Aug 15, 2018
    Posts:
    5
    I am tried to taking capture screenshot on iOS from safari and chrome browser! When I clicked capture button in game it goes to completely freeze. But I test my game on android and capture screenshot it working fine. Here is the link of my game https://bkashverse.com/ios/ , it's works both ios and android browser, the only problem is when I capture a screen shot in ios safari, my webgl game completely freeze / Crashed....
     
    DreamGameBD, Apr 13, 2023
    #33

  34. Anoop114

    Anoop114

    Joined:
    Sep 30, 2019
    Posts:
    1
    I use VS Code and Its live Server Plug-in for the Unity WebGL to run.
    hear the steps:
    1. Change your Player Setting -> Publisher Setting -> Compression format = Disabled
    upload_2023-5-18_21-55-19.png

    2. once Build is Created, open that build directory in VS Code (as for me I created a folder namedhttps://github.com/ritwickdey/live-server-web-extension build and open in vs code)
    upload_2023-5-18_21-59-17.png

    3. install Live Server in your VS Code.

    https://github.com/ritwickdey/live-server-web-extension
    upload_2023-5-18_22-2-48.png



    4. start the server and enjoy your game locally.
    upload_2023-5-18_22-4-7.png

    upload_2023-5-18_22-5-29.png

    as you see I am running in my local machine.
     
    Anoop114, May 18, 2023
    #34
    Benfont, metzc, vMyth and 5 others like this.

  35. Stranger-Games

    Stranger-Games

    Joined:
    May 10, 2014
    Posts:
    393
    SimpleWebServer.exe is the best as it supports the compression and very easy to run. But I am having the problem that it doesn't run if I test it from another PC.
    I think because it listens to localhost or 127.0.0.1. I think there need to be an option to listen to 0.0.0.0
     
    Stranger-Games, May 30, 2023
    #35

  36. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,411
    you can decompile SimpleWebServer.exe and add different listeners,
    currently is uses "server.Prefixes.Add("http://localhost:" + port + "/");",
    so it might work if you add LAN ip there.. but of course requires you to manually fix that for unity versions..
     
    mgear, May 30, 2023
    #36
    Noisecrime likes this.

  37. WaqasGameDev

    WaqasGameDev

    Joined:
    Apr 17, 2020
    Posts:
    118
    After other extensions or chrome plugins no more working, this is the Simplest solution of all! Thanks mate!
     
    WaqasGameDev, Jun 19, 2023
    #37
    IrslanDZM likes this.

  38. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,023
    I created a tutorial about starting the own server and running WebGL App on Desktop and Mobiles with it.
    Hope it will help some of you. Text Tutorial for macOS and Windows.

     
    makaka-org, Sep 3, 2023
    #38
    ModLunar likes this.

  39. ankitrajdwivedi01

    ankitrajdwivedi01

    Joined:
    Aug 29, 2023
    Posts:
    5
    Follow these simple steps to run unity webgl game locally.
    1. Install python server in your local machine.
    2. Build your project from unity.
    3. Navigate to your build folder
    4. open cmd in current directory.
    5. Run command for windows user : > python -m http.server and > python3 -m http.server on Mac.
    6. It shows the port number.
    7. Open any browser in your system and type localhost: portNumber in my case it is localhost:8000 hit enter your game will run locally.
     
    Last edited: Sep 28, 2023
    ankitrajdwivedi01, Sep 28, 2023
    #39

  40. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,411
    needed simple server for testing html+javascript pages (enough of those CORS errors),
    so made this simple c# web server (windows only)
    https://github.com/unitycoder/SimpleWebServer

    Supports unity webgl builds also,
    easy usage with Windows context menu integration.

    If running as an administrator,
    allows outside connections also (so you can test builds from mobile phones in same network too)

    recommended usage:
    - download, unzip, run exe
    - press Y to install context menu, close it
    - use from explorer context menu

    upload_2023-10-22_15-43-7.png
     
    mgear, Oct 22, 2023
    #40

  41. battlecouchstudio

    battlecouchstudio

    Joined:
    Sep 7, 2023
    Posts:
    4
    Last edited: Nov 4, 2023
    battlecouchstudio, Nov 4, 2023
    #41
    Benfont likes this.

  42. bugfinders

    bugfinders

    Joined:
    Jul 5, 2018
    Posts:
    1,739
    its odd, i was reading back and i did simply simplewebserver <path to build folder> and tada http://localhost port 80 was fired up and there was my game.. I really am surprised unity say they cant just do this as part of the editor really am.. the 403s for favicon etc are normal so never worry about those
     
    bugfinders, Nov 4, 2023
    #42

  43. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    1,023
    makaka-org, Nov 5, 2023
    #43

  44. bugfinders

    bugfinders

    Joined:
    Jul 5, 2018
    Posts:
    1,739
    Ps. For those who want a simple life - there is huge room for improvement. However this uses unitys simplewebserver and your build folder and fires it up on port 8080 and then fires a browser.

    Code (CSharp):
    1. using UnityEditor;
    2. using UnityEngine;
    3. using System.IO;
    4. public class ApplicationPathExample
    5. {
    6.     static System.Diagnostics.Process p = new System.Diagnostics.Process();
    7.     [MenuItem("Build/Launch Last Built")]
    8.     static void AppPath()
    9.     {
    10.         try
    11.         {
    12.             if (p.HasExited)
    13.             {
    14.                StartServer();
    15.             }
    16.         }
    17.         catch(System.Exception e)
    18.         {
    19.             StartServer();
    20.         }
    21.         System.Diagnostics.Process b = new System.Diagnostics.Process();
    22.         b.StartInfo.FileName = "http://localhost:8080";
    23.         b.Start();
    24.     }
    25.  
    26.     [MenuItem("Build/EndServer")]
    27.     static void EndServer()
    28.     {
    29.         try
    30.         {
    31.             p.Kill();
    32.         }
    33.         catch (System.Exception e)
    34.         {
    35.             Debug.Log(e.Message);
    36.         }
    37.     }
    38.     static void StartServer()
    39.     {
    40.         Debug.Log("Starting server");
    41.         string apppath =  Path.GetDirectoryName(EditorApplication.applicationPath);
    42.         string lastBuildPath = EditorUserBuildSettings.GetBuildLocation(EditorUserBuildSettings.activeBuildTarget);
    43.      
    44.         p.StartInfo.FileName = Path.Combine(apppath, @"Data\PlaybackEngines\WebGLSupport\BuildTools\SimpleWebServer.exe");
    45.         p.StartInfo.Arguments = lastBuildPath + " 8080";
    46.         p.StartInfo.UseShellExecute = false;
    47.         p.Start();
    48.     }
    49. }
     
    bugfinders, Nov 5, 2023
    #44
    wudsh and adamgolden like this.

  45. Stephen-Hodgson

    Stephen-Hodgson

    Joined:
    Jul 15, 2014
    Posts:
    35
    Anyone figure out how to configure CORS with SimpleWebServer.exe?
     
    Stephen-Hodgson, Dec 13, 2023
    #45

  46. bugfinders

    bugfinders

    Joined:
    Jul 5, 2018
    Posts:
    1,739
    no but you can probably write one one that does the job
     
    bugfinders, Dec 13, 2023
    #46

  47. Stephen-Hodgson

    Stephen-Hodgson

    Joined:
    Jul 15, 2014
    Posts:
    35
    If I wanted to do that I would have already. I just want Build and Run to work with CORs config
     
    Stephen-Hodgson, Dec 13, 2023
    #47

  48. bugfinders

    bugfinders

    Joined:
    Jul 5, 2018
    Posts:
    1,739
    i understand, but when unity dont offer, sometimes we end up creative.. and making your own simplewebserver.exe which does do cors would be one way
     
    bugfinders, Dec 13, 2023
    #48
    Stephen-Hodgson likes this.

  49. Stephen-Hodgson

    Stephen-Hodgson

    Joined:
    Jul 15, 2014
    Posts:
    35
    For real lol. I ended up just going a completely different way anyway.
     
    Stephen-Hodgson, Dec 13, 2023
    #49
    bugfinders likes this.

  50. bugfinders

    bugfinders

    Joined:
    Jul 5, 2018
    Posts:
    1,739
    its why i wrote the script to reshow the last built version, number of times you're working on something and i dont need the 15 minute wait while it rebuilds it to remind me a couple of other things i was going to change..
     
    bugfinders, Dec 14, 2023
    #50
    Stephen-Hodgson likes this.
Page 1 of 2