Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Web Build and GitHub Pages Deployment Automation #24

Merged

Conversation

nicholas-maltbie
Copy link
Contributor

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
Copy link
Owner

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?

* Setup basic demo project with example for web build.
* Setup basic export for web build in demo project.
* Added support for CORS in github pages.
@nicholas-maltbie
Copy link
Contributor Author

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.

image

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
Copy link
Owner

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.

@DmitriySalnikov DmitriySalnikov merged commit 6f4b05a into DmitriySalnikov:master Sep 21, 2023
@nicholas-maltbie
Copy link
Contributor Author

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.

@nicholas-maltbie nicholas-maltbie deleted the nickmaltbie/web-build branch September 21, 2023 05:43
@DmitriySalnikov
Copy link
Owner

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
Copy link
Contributor Author

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
Copy link
Owner

Updated README in ebdd8a0

@skooter500 skooter500 mentioned this pull request Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants