python – Load Unity WebGL in Flask-ThrowExceptions

Exception or error:

I’m a total neewbie in Web and Unity. What i’m trying to do is to run my Unity WebGL build inside my Flask server.

Here is my folder hierarchy:

web\
    templates\
        Build\
            UnityLoader.js
            WebBuild.json
        TemplateData\
            style.css
            TemplateData.js
        index.html
    app.py

app.py has 3 roots, to load all my js files asked by index.html:

app = Flask(__name__, static_url_path='/templates')
APP_ROOT = os.path.dirname(os.path.abspath(__file__))

@app.route("/")
def index():
    return render_template("index.html")

@app.route('/templates/Build/<path:path>')
def send_Buildjs(path):
    return send_from_directory('templates/Build', path)

@app.route('/templates/TemplateData/<path:path>')
def send_Templatejs(path):
    return send_from_directory('templates/TemplateData', path)

if __name__ == "__main__":
    app.run(port=4555, debug=True)

index.html is the default generated file by Unity for WebGL application with some slight modifications:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | VisualNN</title>

    <link rel="shortcut icon" href="{{ url_for('static', filename='TemplateData/favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='TemplateData/style.css') }}">
    <script src="{{ url_for('static', filename='TemplateData/UnityProgress.js') }}"></script>
    <script src="{{ url_for('static', filename='Build/UnityLoader.js') }}"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "{{ url_for('static', filename='Build/WebBuild.json') }}", {onProgress: UnityProgress});

    </script>
</head>
  <body>
    <div class="webgl-content">
      <div id="unityContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
            <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
        <div class="title">VisualNN</div>
      </div>
    </div>
  </body>
</html>

In my Firefox browser icon is loaded, all js files are loaded too. I get 202 and 304 response messages for icons and js files.
But the unity game is not loading, no box just empty. Nothing is showing in the Firefox console.
I’m guessing that Build/WebBuild.json is not loading? As anyone has an idea what is the problem?

EDIT

Some extra info while I load the page from the Flask Server console:

127.0.0.1 - - [10/May/2019 18:34:55] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/style.css HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/UnityProgress.js HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/Build/UnityLoader.js HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/webgl-logo.png HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/fullscreen.png HTTP/1.1" 304 -
How to solve:

I’ll share my answer found on Reddit:

https://www.reddit.com/r/flask/comments/ab7i9d/how_to_make_the_unity_webgl_build_work_with_flask/

###

Here is a most simple solution, you just have to change your static folder and template folder paths on your app.py, here is an example:

`app = Flask(__name__, static_folder="./", template_folder="./")

 @app.route('/')
 def home():
    return render_template("index.html"), 200





 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 5000))
     app.run(debug=True, host='0.0.0.0', port = port)`

With this you don’t need to change anything on your index.html everytime you do a release.
P.D: You can hardcode any path you want, not just static folder, in my case it is my root project

enter image description here

Leave a Reply

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