Weekly Blog 4

[dolerich-hirnfiedler]

Hello and welcome to the fourth edition of our weekly blog for Underwatch. This week we will present to you our CI-Integration for our Game, our Website and for our Backend.

We used Git Workflows to integrate our CI into our project. This means we declare some steps which have to run successfully in order to merge our changes onto the main branch. Depending on the technology used, these commands can vary. In the next three parts, we will take a closer look at the yaml files for our different Parts of the project.

🕹️ The Game CI

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.
# This workflow will build a Java project with Gradle and cache/restore any dependencies to improve the workflow execution time
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-gradle

name: Java CI with Gradle

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
    paths:
      - 'game/**'
      - '.github/workflows/gradle.yaml'

permissions:
  contents: read

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Set up JDK 18
      uses: actions/setup-java@v3
      with:
        java-version: '18'
        distribution: 'temurin'
    - name: Setup Gradle
      uses: gradle/gradle-build-action@bd5760595778326ba7f1441bcf7e88b49de61a25 # v2.6.0

    - name: Execute Gradle build
      working-directory: game
      run: ./gradlew dist

    - name: Archive Game Build
      uses: actions/upload-artifact@v3
      with:
        name: Underwatch Game
        path: game/desktop/build/libs/desktop-1.0.jar

We will break down the file into smaller parts, and explain them step by step

name: Java CI with Gradle

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
    paths:
      - 'game/**'
      - '.github/workflows/gradle.yaml'

The name tag gives the github workflow a name. Each name has to be distinct.
The next part declares at which point the workflow should be initiated. In this case for each
push to main.
If there is a pull request it should only run when changes in the workflow file, or the game files are detected.

permissions:
  contents: read

This snippet gives the workflow read-permissions. This means the workflow is not allowed to write to the repository.

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Set up JDK 18
      uses: actions/setup-java@v3
      with:
        java-version: '18'
        distribution: 'temurin'
    - name: Setup Gradle
      uses: gradle/gradle-build-action@bd5760595778326ba7f1441bcf7e88b49de61a25 # v2.6.0

    - name: Execute Gradle build
      working-directory: game
      run: ./gradlew dist

    - name: Archive Game Build
      uses: actions/upload-artifact@v3
      with:
        name: Underwatch Game
        path: game/desktop/build/libs/desktop-1.0.jar

The last block is the main part of the workflow. It sets up an ubuntu machine, then it gets the project from the git repository. And sets the dependencies up. In this case it downloads the JDK 18. Afterwards it builds the game with gradle and sends the resulting Jar file as artifact to the github repository of the project.

🌐 The Website CI

# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.
# This workflow will build a Java project with Gradle and cache/restore any dependencies to improve the workflow execution time
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-gradle

name: React CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
    paths:
      - 'website/**'
      - '.github/workflows/react.yaml'

permissions:
  contents: read


jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - name: Clone repository
          uses: actions/checkout@v3
        - name: Use Node.js 18.x
          uses: actions/setup-node@v2
          with:
            node-version: 18.x
        - name: Install dependencies
          run: npm install
          working-directory: website
        - name: Generate build
          run: npm run build
          working-directory: website
        # Share artifact inside workflow
        - name: Upload Juicy J's Webpage Artifact
          uses: actions/upload-artifact@v3
          with:
            name: website
            path: website/build

This yaml file is similar to the previous one, only the path and the build process differ to the previous yaml file.

🍃 The Backend CI

# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.
# This workflow will build a Java project with Gradle and cache/restore any dependencies to improve the workflow execution time
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-gradle

name: Spring Boot CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
    paths:
      - 'backend/**'
      - '.github/workflows/spring.yaml'

permissions:
  contents: read

jobs:
    build:
      runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v3
      - name: Set up JDK 18
        uses: actions/setup-java@v3
        with:
          java-version: '18'
          distribution: 'temurin'
      - name: Setup Gradle
        uses: gradle/gradle-build-action@bd5760595778326ba7f1441bcf7e88b49de61a25 # v2.6.0
  
      - name: Execute Gradle build
        working-directory: backend
        run: ./gradlew bootJAR
  
      - name: Archive Game Build
        uses: actions/upload-artifact@v3
        with:
          name: Backend
          path: backend/build/libs/

This is again the same pattern as previous. I hope by now you know how to setup a basic CI with github workflow.
If you have some tips you want to share with us, please let us know in the comments.

Until next Week with another awesome update from the Underwatch Team

[QuinnyPikaPika]

Dear Underwatch team,
you explained very well how your CI-workflow is working. It was very easy to understand.
I also think that your code is very readable and self-explainatory. That is really nice.
Do you already have something in mind for your CD-workflow?

Your team Plapy

[sfrancisw]

Hello Underwatch Team,
We really like the detailed explanation of the CI-workflow.
Providing the code in the blog makes it way easier to read and understand.
Looking forward to see your game grow!

Your team time2shine

[derrrobin]

Hello,
First of all, it's great to see that you're sharing insights into your CI-Integration process for Underwatch. This information can be valuable for others in the development community. Here are some feedback points:

The post does a decent job of breaking down the YAML files for your CI workflows, but it could benefit from more clarity and organization. Consider using headers or bullet points to clearly separate and explain each section or step. This would make it easier for readers to follow along.

Also I like the design of oyur posts and the point that you show us pictures.

Your CookPit tean