Skip to content

Latest commit

 

History

History
73 lines (44 loc) · 3.11 KB

README.md

File metadata and controls

73 lines (44 loc) · 3.11 KB
Raw

Create a Webhook for the GitHub Repository

Now that we have created the jobs for both UI's, Easy Franchie UI and Day 2 Operations UI, we can trigger the build manually. What we actually want is that the build is triggered automatically each time when there is a change in the repository. Therefore, we will configure a webhook that reacts on changes.

Enable the Webhook in Our Repository

  1. In the overview screen of SAP Continuous Integration and Delivery, choose Repositories.

  2. Select your repository.

  3. Choose Edit.

  4. In the repository edit screen, choose Add.

  5. In the Type field, select GitHub.

  6. In the Webhook Credential field, select Create Credentials.

  7. Enter a name for the credentials

  8. Click on Generate and copy the created Secret

  9. Choose Save.

Get the Webhook Data

In the repository details, choose ... and then choose Webhook Data.

  • Either note down the payload URL leave the window open, as we will need this value for the webhook configuration.

Configure the Webhook in GitHub

  1. Open your repository in GitHub and choose Settings.

  2. Choose Hooks and then choose Add webhook.

  3. In the Add webhook dialog, fill in the following field:

    • Payload URL: use the Payload URL (see the chapter above).
    • Contend Type: application/json
    • Secret: enter the secret (see chapter above)

  4. Choose Add webhook.

Do a Test Commit to Trigger the Build

In order to test the webhook, you can perform a change in the Easy Franchise application. Let's test it by changing something in the Easy Franchise UI.

Note: Currently the build job is configured to use the same version for every build. This will lead to the problem that after performing below described change it will not be visible on the UI. To overcome that problem please edit the deployment job and change the Container Image Tag to another value e.g. easyfranchise-ui-002.

  1. Open the file UserProfile.vue.

  2. Change the header H1 from User Profile to User Details.

    <h1 class="mt-5 mb-5 text-center">User Details</h1>

  3. Open the Easy Franchise application to see if the UI is correctly updated. On the top right corner in the bar, choose the user icon.

  4. Verify that the page header is called now User Details.

  5. Save the file and push the changes to the repository.

As soon as the changes are pushed, both jobs are triggered automatically. After the job is finished, open the application UI and check if your changes are there.

Note: As we have only changed one of the UIs, it would be unnecessary to trigger both jobs. But as we use one and the same repository and branch for each build job, we cannot prevent that.