Added Web Build and GitHub Pages Deployment Automation

nicholas-maltbie commented 1 year ago

Seeing how Web/WASM support was added in PR #23, I figured it would be nice to add a demo to the project as well via GitHub pages to host the web example.

Additions:

Demo webgl project for using the wasm files
GitHub Action for deploying site to github pages

I added a new godot demo project at the directory dd3d_web_build. This just contains a bare bones project that we can copy the demo and addons into when building the site. There is a readme at dd3d_web_build/README.md with commands for how to build and host the site on your local machine.

The example project consists of a few files.

coi-serviceworker.min.js : This allows for CORS support on sites like GitHub Pages, see gzuidhof/coi-serviceworker for details.
export_presets.cfg : Contains definition for web export template
README.md : Project description and build instructions.

Other files in the dd3d_web_build are just part of a default godot project and can be removed if needed.

The commands to build and run the project locally are as follows:

# Copy addons to project
cp -r addons/ dd3d_web_build/addons/

# Copy examples to project
cp -r examples_dd3d/ dd3d_web_build/examples_dd3d/

# Build the project for web platform with godot
mkdir -p dd3d_web_build/build
cp dd3d_web_build/coi-serviceworker.min.js dd3d_web_build/build/coi-serviceworker.min.js
godot -e --headless --path dd3d_web_build --quit
godot --headless --path dd3d_web_build --export-release web

# Host site locally via python
python -m http.server --directory dd3d_web_build/build

The other major addition as part of this PR is adding a GitHub action to build and deploy the demo site via GitHub Actions. See Deploying with GitHub Actions for how to activate this action for a repo. This action is set to trigger either manually or whenever there is a change to master branch.

The action 🚀 Deploy Github Pages Demo will first setup and build the project using the container barichello/godot-ci:4.1.1 then deploy the site with the actions/deploy-pages@v2 action.

An example of this hosted live is via my repo here - https://nickmaltbie.com/godot_debug_draw_3d/

DmitriySalnikov commented 1 year ago

Wow, that's cool! Now I have to improve the examples 😅

This action is set to trigger either manually or whenever there is a change to master branch.

I think that later I will restrict not only the branch, but also the files on which the contents of the project depend. Although in fact, it is best to run this action manually or configure the launch after updating the binaries.

then deploy the site with the actions/deploy-pages@v2 action.

To deploy the pages, do I need to configure something else?

nicholas-maltbie commented 1 year ago

Wow, that's cool! Now I have to improve the examples 😅

This action is set to trigger either manually or whenever there is a change to master branch.

I think that later I will restrict not only the branch, but also the files on which the contents of the project depend. Although in fact, it is best to run this action manually or configure the launch after updating the binaries.

Hey, I'll remove the automated deployment on commits to master in an updated PR.

then deploy the site with the actions/deploy-pages@v2 action.

To deploy the pages, do I need to configure something else?'

Yes, you need to enable the github pages deploy via github actions. There are some details in the docs here - https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow

Also, godot's web build only supports https so you may want to enable the 'enforce https' option as well.

If you have any other comments or suggestions let me know.

Also, I might make an issue on the repo to follow up and update the docs to explain the new web support, since this and PR #23 should have added web support but it's not yet added to the docs.

DmitriySalnikov commented 1 year ago

Also, I might make an issue on the repo to follow up and update the docs to explain the new web support, since this and PR #23 should have added web support but it's not yet added to the docs.

I think I'll add the clarification to the Build section myself. After all, nothing is needed for the build except the patch and the installation of emscripten? CORS and HTTPS do not really apply to this project, but I may attach instructions for launching a local HTTPS. I can also add a link to your instructions on how to add a demo project build.

nicholas-maltbie commented 1 year ago

I think I'll add the clarification to the Build section myself. After all, nothing is needed for the build except the patch and the installation of emscripten? CORS and HTTPS do not really apply to this project, but I may attach instructions for launching a local HTTPS. I can also add a link to your instructions on how to add a demo project build.

CORS and HTTPS don't really apply to this project, but you need them to host on a site like GitHub pages where you can't directly control the website configuration. You can only host via http if it's a local server.

DmitriySalnikov commented 1 year ago

CORS and HTTPS don't really apply to this project, but you need them to host on a site like GitHub pages where you can't directly control the website configuration. You can only host via http if it's a local server.

I will add everything needed to the instructions, but if you have a separate page with recommendations on how to host a demo project, then I can specify it as well.

It works! https://dmitriysalnikov.github.io/godot_debug_draw_3d/

Thanks!

nicholas-maltbie commented 1 year ago

I will add everything needed to the instructions, but if you have a separate page with recommendations on how to host a demo project, then I can specify it as well.

No specific recommendations, seems like the Godot page on Export to Web has some additional instructions. One thing important to also take note of is that you need to use the dlink enabled for export template and have the Options > Variant > Extensions Support enabled in the export configuration.

To get it to work on a host like GitHub pages you need to enable HTTPS and add CORS support with the service worker https://github.com/gzuidhof/coi-serviceworker

I haven't got it to work with multiple gdextension projects together but I'm still learning how Godot works so might be missing something obvious.

DmitriySalnikov commented 1 year ago

Updated README in ebdd8a0f3b517638dfbdf7df8083f0b56f7ff64c

DmitriySalnikov / godot_debug_draw_3d

Added Web Build and GitHub Pages Deployment Automation #24