{"id":276,"date":"2023-12-16T11:58:31","date_gmt":"2023-12-16T15:58:31","guid":{"rendered":"https:\/\/notebook.chaopricha.com\/?p=276"},"modified":"2023-12-16T14:51:08","modified_gmt":"2023-12-16T18:51:08","slug":"how-to-make-godot-4-x-web-export-work-on-a-webserver-apache-based","status":"publish","type":"post","link":"https:\/\/notebook.chaopricha.com\/?p=276","title":{"rendered":"How To Make GoDot 4.x Web Export Work On A Hosted Web Server (Apache based)"},"content":{"rendered":"\n

I’m currently learning how to make games in GoDot 4.x and it’s been great so far and I even have the first tutorial game working on my PC computer. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

This is great and all, but I want to share my game with other people. The first thought is to export it to HTML5 so I can just run it on my website hosted here by ICDSoft. My webhost is just an Apache based host running Linux of some sort. They do provide several cool server side stuff like php, mySQL, etc. However, the server plan I have doesn’t do node.js and things like that would allow me to run React framework. (They do have a Web App plan that lets you do that). Anyway, GoDot 4.x game export to HTML5 shouldn’t really need that. Exporting my game to a runnable web format is pretty straight forward in GoDot 4.x. Just go to Projects -> Export …
<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

If you haven’t chosen any export presets, just click Add… at the top and then choose Web. This will create the presets you need to export to the web.
<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The only thing you really need to fill out is where you want the export path to be. I just have it export to a “Web” folder inside my project to keep things clean since several files will be generated by the export. Make sure that you toggle the Runnable to enable<\/strong> so that the game is runnable from the html file you chose.

Click Export All … to start the process.
<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

If you go to the export folder you chose, you’ll se a bunch of files needed for your web output to run. Note that the html file just won’t run on your Chrome or FireFox browser locally without a webserver of some sort.

There are many guides on how to spin up a local server to run your GoDot 4.x project like this one:
https:\/\/github.com\/TechnoLukas\/Godot4-html-localy<\/a>

or a nice an simple Python3 server like this one:
https:\/\/gist.github.com\/opyate\/6e5fcabc6f41474d248613c027373856<\/a><\/p>\n\n\n\n

However, I don’t need a local server running since I already have my web host. Unfortunately, it’s actually not that simple due to this particular error when trying to run the game on my website after uploading all the exported files.
<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

My initial thought was that maybe I can’t just run it on my web host but that’s a bit disappointing since I didn’t have problems running games made with Unity on the web. It’s a bit disappointing. I’m using GoDot 4.0.2 to be compatible with the tutorials I’m following. At the time of this post, GoDot 4.2 is the latest but it sounds like this is still an issue if your web server doesn’t have Cross Origin Isolation configured. I did a lot of web searches but there wasn’t a lot of solutions other than posting my game on itch.io<\/a>. <\/p>\n\n\n\n

I started reading through the GoDot help (https:\/\/docs.godotengine.org\/en\/stable\/tutorials\/export\/exporting_for_web.html#<\/a>) to see whether there are anything that could help me solve this problem. I came across this section about coi-serviceworker as a workaround. That could be the answer!
<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

The link took me to a GitHub project: https:\/\/github.com\/gzuidhof\/coi-serviceworker and the instruction is pretty clear.

You have 2 options (pick one):<\/strong>
1) Download coi-serviceworker.js<\/a> (6 kB)into your web export folder and add this line to your html file:<\/p>\n\n\n\n

<script src=\"coi-serviceworker.js\"><\/script><\/code><\/p>\n\n\n\n

2) Download coi-serviceworker.min.js<\/a> (3 kB) in to your export folder and add this line to your html file:<\/p>\n\n\n\n

<script src=\"coi-serviceworker.min.js\"><\/script><\/code><\/p>\n\n\n\n

I tried option 2 to minimize the extra file size to include. I edited my speedy_saucer.html file and scroll to where the <script> section is and add the extra tag. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

I saved the file and uploaded it along with the coi-serviceworker.min.js into my web project folder. Now I went to my website location where I uploaded the GoDot 4.x web export folder again and it worked!!!
<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Another way to include the script is to add it in the Head Include during the export. Make sure to have the correct corresponding coi-serviceworker js file in your project.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n


Maybe in the future update of GoDot 4.x this problem would be solved, but in the mean time the workaronud works great. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

I’m currently learning how to make games in GoDot 4.x and it’s been great so far and I even have the first tutorial game working on my PC computer. This is great and all, but I want to share my … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=\/wp\/v2\/posts\/276"}],"collection":[{"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=276"}],"version-history":[{"count":4,"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=\/wp\/v2\/posts\/276\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=\/wp\/v2\/posts\/276\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notebook.chaopricha.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}