How to Play a Godot 4 HTML Project Locally?

Question

I have exported the web version of my Godot 4, it is in a folder on my local drive.

Because of the SharedArrayBuffer dependency I can not just double-click in the index.html file. If I do so I see this error:

Error The following features required to run Godot projects on the Web are missing: Cross Origin Isolation - Check web server configuration (send correct headers) SharedArrayBuffer - Check web server configuration (send correct headers)

How can I run it in local?

Quagmire

Answer 1

This python script allows you to open a simple web server running in port 8000:

#!/usr/bin/env python3
from http import server # Python 3

class MyHTTPRequestHandler(server.SimpleHTTPRequestHandler):
        def end_headers(self):
                self.send_my_headers()
                server.SimpleHTTPRequestHandler.end_headers(self)

        def send_my_headers(self):
                self.send_header("Access-Control-Allow-Origin", "*")
                self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
                self.send_header("Cross-Origin-Opener-Policy", "same-origin")

if __name__ == '__main__':
        server.test(HandlerClass=MyHTTPRequestHandler)

Add this code in a file called server.py in the same folder or your web export (where the index.html is)

Then go to the folder with the terminal and execute:

> python3 server.py 

Then in your browser you can write the URL:

localhost:8000

Source

Quagmire

Even with this script I still had feature errors. However, thanks to the link "Source" to the original GitHub thread I could see in the post just below that there is an official script: github.com/godotengine/godot/blob/master/platform/web/serve.py that actually works. But it uses exactly the same headers, so no idea why it does. It's less convenient to use too, as you if serve.py is in another folder you must pass full path to root with -r path/to/html and also an unused port like -p 8000. Sum-up: in html folder, run python3 path/to/serve.py -r "$(pwd)" -p 8000 – Aesir

To make the serve.py script easier to use, simply uncomment os.chdir(root) in the serve function. Now the script will serve the index.html file in the same folder as the script. – Nonflammable

Answer 2

The official documentation talks about this on the Exporting for the Web page, specifically the Serving the files section :

The Godot repository includes a Python script to host a local web server. This script is intended for testing the web editor, but it can also be used to test exported projects.

Here is the current version of the linked script :

#!/usr/bin/env python3

from http.server import HTTPServer, SimpleHTTPRequestHandler, test  # type: ignore
from pathlib import Path
import os
import sys
import argparse
import subprocess


class CORSRequestHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
        self.send_header("Access-Control-Allow-Origin", "*")
        super().end_headers()


def shell_open(url):
    if sys.platform == "win32":
        os.startfile(url)
    else:
        opener = "open" if sys.platform == "darwin" else "xdg-open"
        subprocess.call([opener, url])


def serve(root, port, run_browser):
    os.chdir(root)

    if run_browser:
        # Open the served page in the user's default browser.
        print("Opening the served URL in the default browser (use `--no-browser` or `-n` to disable this).")
        shell_open(f"http://127.0.0.1:{port}")

    test(CORSRequestHandler, HTTPServer, port=port)


if __name__ == "__main__":
    parser = argparse.ArgumentParser()
    parser.add_argument("-p", "--port", help="port to listen on", default=8060, type=int)
    parser.add_argument(
        "-r", "--root", help="path to serve as root (relative to `platform/web/`)", default="../../bin", type=Path
    )
    browser_parser = parser.add_mutually_exclusive_group(required=False)
    browser_parser.add_argument(
        "-n", "--no-browser", help="don't open default web browser automatically", dest="browser", action="store_false"
    )
    parser.set_defaults(browser=True)
    args = parser.parse_args()

    # Change to the directory where the script is located,
    # so that the script can be run from any location.
    os.chdir(Path(__file__).resolve().parent)

    serve(args.root, args.port, args.browser)

To serve your files:

Save the linked script to a file called serve.py, move this file to the folder containing the exported project's index.html, then run the following command in a command prompt within the same folder:

# You may need to replace `python` with `python3` on some platforms.
python serve.py --root .

Sherborne

Answer 3

If you're more into the c#/.net ecosystem than into python you may feel more familiar to use dotnet-serve using the "dotnet serve" tool.

To start a godot project exported to the "Web" profile locally in your browser you can use the following dotnet-serve command:

dotnet serve --directory <YOUR_GODOT_EXPORT_TO_WEB_FOLDER> --open-browser -h "Cross-Origin-Opener-Policy: same-origin" -h "Cross-Origin-Embedder-Policy: require-corp" -h "Access-Control-Allow-Origin: *"

Replace <YOUR_GODOT_EXPORT_TO_WEB_FOLDER> with the folder you Web-exported your godot project to. Using Windows, you could save the command line into a ".bat" file and double-click it from file explorer to start the server and the browser simultaneously.

Jochebed

Answer 4

If you're running a local Apache server, you can add the following to your .htaccess file:

Header add Access-Control-Allow-Origin "*"
Header add Cross-Origin-Opener-Policy "same-origin"
Header add Cross-Origin-Embedder-Policy "require-corp"

Source

Pekoe