TeaVM on github

[Quillraven]

@czyzby: Hi, you offered your help a few weeks ago to setup a runnable TeaVM version on github. I'd like to try that with this game using the kotlin branch.

TeaVM is working when I run it from IDE and open the browser. Could you guide me please a little bit into the different steps that are necessary to host it on github in this repo? I'd imagine that it should run when you enter github.io/quillraven/MysticGarden if that is possible.

Thanks for your help!

[czyzby]

Sure, no problem.

1. Make sure to enable GitHub pages in the repository settings (Pages submenu). I think by default it will host the gh-pages branch, but you can also change it to anything you want.
2. Generate an Access Token with appropriate permissions for the repository.
3. Add the Access Token in the repository settings under Secrets and variables > Actions submenu. I believe the variable names are case-insensitive.
4. Add a GitHub action that builds the project and deploys the compiled TeaVM to the GitHub pages branch.
   4.1 As you can see here, the sample repository builds the application on every push to the main branch, as well as on request upon manual deployment (workflow_dispatch). You can define different hooks to suit your needs - see the GitHub Actions documentation for more info.
   4.2 This line modifies the TeaVM index.html with a regular expression. You can either remove it or customize it for your needs.
   4.3 This is where you should change the variable name to whatever you've chosen as the Access Token variable name.

After registering the Access Token and adding the workflow, you can head to the Actions menu and run the workflow manually to test it.

[Quillraven]

Thank you so much for the very detailed explanation. Will try that on Wednesday!

[Quillraven]

Sure, no problem.

1. Make sure to enable GitHub pages in the repository settings (`Pages` submenu). I think by default it will host the `gh-pages` branch, but you can also change it to anything you want.

2. Generate an [Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) with appropriate permissions for the repository.

3. Add the Access Token in the repository settings under `Secrets and variables > Actions` submenu. I believe the variable names are case-insensitive.

4. Add a [GitHub action](https://github.com/libktx/ktx-sample-web-project/blob/main/.github/workflows/publish.yml) that builds the project and deploys the compiled TeaVM to the GitHub pages branch.
   4.1 As you can see [here](https://github.com/libktx/ktx-sample-web-project/blob/main/.github/workflows/publish.yml#L2-L5), the sample repository builds the application on every push to the `main` branch, as well as on request upon manual deployment (`workflow_dispatch`). You can define different hooks to suit your needs - see the GitHub Actions documentation for more info.
   4.2 [This line](https://github.com/libktx/ktx-sample-web-project/blob/main/.github/workflows/publish.yml#L27) modifies the TeaVM `index.html` with a regular expression. You can either remove it or customize it for your needs.
   4.3 [This is where](https://github.com/libktx/ktx-sample-web-project/blob/main/.github/workflows/publish.yml#L31) you should change the variable name to whatever you've chosen as the Access Token variable name.

After registering the Access Token and adding the workflow, you can head to the Actions menu and run the workflow manually to test it.

I tried to follow your instructions but got an error:

Any idea why this folder is missing?

fyi:

• I created a new gh-pages branch from master. Is this correct? Or should it be an empty branch without anything?
• The settings in the repo are:
  
• I created a new action under .github/workflows/gh-pages.publish.yml
• for the AccessToken I only selected "workflow" as a privilege. Not sure if other things are necessary but I guess I will get errors during the workflow, if a permission is missing.

name: Publish to github pages

on:
  push:
    branches: [ kotlin ]
  workflow_dispatch:

jobs:
  publish:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Set up JDK 11
      uses: actions/setup-java@v3
      with:
        java-version: '11'
        distribution: 'temurin'
    - name: Build with Gradle
      uses: gradle/gradle-build-action@v2
    - name: Build TeaVM
      run: ./gradlew teavm:build
    - name: Publish game
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        token: ${{ secrets.GH_PAGESS_ACCESS_TOKEN }}
        branch: gh-pages
        folder: teavm/build/dist/webapp/
        repository-name: mystic-garden-teavm

[Quillraven]

Okay, I think the repository-name is not correct in my case. I publish to the same repository. I removed it now and try again ;)

edit: now I get a different error. I have added the "permissions: contents: write" to the yml file and I also setup read and write permissions in the repo... will need to investigate some more tomorrow.

[Quillraven]

Had to remove the token line then it worked. Seems like it then falls back to the repositorys default token and should be preferred over an extra token from what I read.

Anyway, it is then working with the action!

edit: oh cool, an it is then already working: https://quillraven.github.io/MysticGarden/

thanks a lot @czyzby , as always - happy easter!

[czyzby]

Haha, you figured it out before I had a chance to read your comments. Glad it worked out. 😅

[czyzby]

I created a new gh-pages branch from master. Is this correct? Or should it be an empty branch without anything?

It should work as is. I think by default the GitHub action removes all previous files unless you explicitly tell it not to. I usually clean the gh-pages branches for good measure, but it's not necessary.

Okay, I think the repository-name is not correct in my case. I publish to the same repository. I removed it now and try again ;)

If not given, it will default to the same repository, so removing this setting should not be an issue. Judging by your configuration, you passed a branch name instead of the repository - it should be Quillraven/MysticGarden.

Had to remove the token line then it worked. Seems like it then falls back to the repositorys default token and should be preferred over an extra token from what I read.

I see. If it works, I wouldn't worry about it - it's probably just that your don't need one if you're deploying to the same repository that's yours. In my case, I've originally created the configuration for the main organization's libktx/ktx repository and pushed to other sample repositories, so I think the token might have been necessary. If you want to pinpoint the issue, I'd start with checking whether the personal access token has write permissions to this repository.

[Quillraven]

@czyzby: by the way, I think your sed command is not necessary. It is a little counter intuitive but there are two different resolutions that you can set in TeaVM.

The first one is in TeaVMBuilder, which I guess is similar to the resolution size of the window in the desktop launcher. At least I used those values:

There is a second resolution in TeaApplicationConfiguration. I checked the documentation and seems like it supports two values. 0 and -1.
0 uses the available space. I assume it stretches to maximum size to fit into the browser but not 100% sure.
-1 uses the canvas size which is the default value. Value of 0 maximized the game for me correctly on desktop and mobile browser and it was also correctly centered.
There is also a usePhysicalPixels property in TeaApplicationConfiguration but it has no documentation. Default value seems to be false.

I find the 0 and -1 value very strange. Would be better to solve that via a flag or enum. I used the same values in both classes and that looked very weird on mobile browser. A very small windows on the bottom left corner.

[czyzby]

I think I added sed to replace the background color and center the canvas. Not sure if it's still necessary, but it was not possible to change the HTML template otherwise.