Overview

Skill Level: Any Skill Level

In this article, I will show you how to use Github Desktop to make changes to website code hosted in a Cloud Foundry application in Bluemix. We will look at the differences between the dev and prod workspaces.

Ingredients

  • A Cloud Foundry application on IBM Bluemix used to host a website that utilizes Github integration for version control of the code.
  • Github Desktop. For Mac, you can download this at the Mac@IBM App Store.

Step-by-step

  1. Navigate to the IBM Bluemix Dashboard

    https://console.w3ibm.bluemix.net/dashboard/apps

  2. Ensure that you are in the dev workspace

    This is because the proper web development standard is to first make changes to the development workspace, then the production workspace. This is to mitigate the effects of possible website-breaking changes.

    Screen-Shot-2019-01-28-at-4.26.45-PM

  3. Open the Appropriate Cloud Foundry App

    Click inside the row of the application you wish to update. Do not on the link itself, as this opens up the website where your dev workspace is deployed.

    Screen-Shot-2019-01-28-at-4.31.30-PM

  4. Click "View Toolchain"

    In this view, you should see a box for Continuous Delivery. Click the “View Toolchain” button.

    Screen-Shot-2019-01-28-at-4.32.53-PM

  5. Open the Github Repository

    This should bring you to a page that looks like this. If you click the Github box under “Code”, you will be directly taken to the Github repository which houses all the code for your website.

    Screen-Shot-2019-01-28-at-4.37.14-PM

  6. Download the Github Repository to your computer

    It should take you to a place that looks like this.

    Screen-Shot-2019-01-28-at-4.44.13-PM

     

    Click the green button at the top right that says “Clone or download”. Choose “Open in Desktop”.

    Screen-Shot-2019-01-28-at-4.46.51-PM

    If you do not currently have Github Desktop, you will be prompted to download it. For Mac, you can download it at the Mac@IBM App Store.

  7. Explore Github Desktop

    Your Github Desktop application should look similar to this. Under “Enterprise”, you should see the repository you just downloaded. Make sure it is selected. At the top are two tabs: “No Uncommitted Changes” and “History”. Under History, you should see a list of all changes that have occured to the repository since its creation.

    “No Uncommitted Changes” is telling you that the version of the code in your computer is identical to the code that is currently on Github. This is because we just downloaded it to our computer from Github. When you make changes to the code on your computer, you will need to use Github Desktop to “push” the changes to the Github repository. Once it is reflected online, your website will either automatically update with the changes, or you must manually update the changes in Bluemix.

    Screen-Shot-2019-01-28-at-4.52.49-PM

  8. Find the website code in your computer

    Right click the repository and click “Open in Finder” (Mac)

    Screen-Shot-2019-01-28-at-4.57.42-PM

    This will bring you to where the code lives on your computer.

    here

  9. Make a change

    In our example, we will navigate inside the “build” folder and make a change to “index.html”, the landing page of the website.

    We will simply change the header to say “Test” inside it.

    Screen-Shot-2019-01-28-at-5.09.38-PM

    (I am using the text editor Atom)

  10. Commit and Sync your change

    Navigate back to Github Desktopand you should now see the tab “1 Uncommitted Change”. Click it, and it will show you the change you made.

    Screen-Shot-2019-01-28-at-5.10.53-PM

     

    Now, you will commit that change to Github. Type a summary and optional description of what you changed. Then click “Commit to master”. Master refers to the master branch, which is the default for any repository. You can create branches in Github for greater version control capabilities.

     

    Once you commit, you will see a box appear under the button you just pressed. Commits here have not yet been pushed to Github. To push them, click the “Sync” button in the top right.

    Screen-Shot-2019-01-28-at-5.16.55-PM

     

  11. Configure your website to either automatically or manually update

    Once syncing is complete, Github Desktop will now say No Uncommitted Changes. If you go back to the Github repository in your browser and refresh the page, you will see your change reflected in the repository.

    Now, your Bluemix website will either automatically update with your change, or you must manually tell it to update. To see which is configured for your website, navigate back to the toolchain in Bluemix and click the Delivery Pipeline box.

    Screen-Shot-2019-01-28-at-5.25.31-PM

     

    Click the gear icon in the top right of the Build Stage box and click “Configure Stage”.

    Screen-Shot-2019-01-28-at-5.27.23-PM

     

    Click the Input tab on the top left. Under “Stage trigger”, you can choose for the website to either update the website automatically whenever a change is pushed to Github (first option), or to manually update the website from Github (second option). Click the Save button after you decide.

    Screen-Shot-2019-01-28-at-5.30.38-PM

     

    If you choose to manually update the website after a change in Github, then you must click the “Play” button in the top right of the Build Stage box in the Delivery Pipeline every time.

    Screen-Shot-2019-01-28-at-5.36.46-PM

    Otherwise, automatic updates means that the change you pushed on Github recently should already be live (it can take several minutes).

  12. See your updated website

    Navigate to your development website (if you need the link, remember that it is on the Cloud Foundry dashboard) and see your update!

    Screen-Shot-2019-01-28-at-5.40.56-PM

    (we added the word “TEST”)

    Don’t forget, the change we just made will only be visible in the dev workspace, for the dev URL. This means our change isn’t actually on the production (client-facing) website yet. This allows us to safely see how our changes look on the website in case we make mistakes.

  13. Update the Production repository and website

    Now we must do the same thing for Production. Make sure you are in the prod workspace.

    Screen-Shot-2019-01-28-at-5.50.49-PM

    Then navigate inside your production app, click View Toolchain, and the Github box to find the production repository. Then open it in Github Desktop and open the folder the production code is held in your computer. Click and drag the files you changed from your dev folder to the production folder. This will replace those contents with the updated files from dev.

    Then Github Desktop should allow you to make a commit to the production repository, sync the change, and your production website will either automatically update from Github or you will manually click “Play” in the Build Stage box in the Delivery Pipeline on Bluemix.

    Now your changes should appear on your production website!

  14. Closing Notes

    You may have noticed another workspace in Bluemix called “test”. While this is not as commonly used, this is a useful workspace for more important changes that require user testing from a select (usually internal) audience before the changes can go live on production.

     

    If you have any questions related to this article, feel free to reach out to me via email: lily.peng@us.ibm.com

Join The Discussion