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?

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

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 .

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.

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