Skip to main content

Lab-3-1

(2.5% of the course mark)

GitHub Basics Lab​

  • This lab is designed to introduce you to the fundamental concepts and workflows of GitHub, a popular platform for version control and collaboration. By the end of this lab, you will be familiar with the basic operations of GitHub, including creating repositories, making commits, branching, and collaborating with others.

Lab objectives​

  1. Become proficient in basic GitHub operations such as creating repositories, making commits, creating branches, and merging changes.

  2. Understand the importance of version control in software development and how GitHub facilitates collaboration and history tracking.

  3. Develop skills in collaborating with others on software projects using GitHub's features like pull requests, issues, and branches.

  4. Learn how to organize code using repositories and branches effectively, ensuring a structured and manageable codebase.

  5. Get familiar with common Git commands used in conjunction with GitHub, such as git clone, git add, git commit, git push, git pull, and git merge.

  6. Learn and adhere to best practices for using GitHub, including clear commit messages, meaningful branch names, and effective pull request reviews.

  7. Improve their project management skills by utilizing GitHub's issue tracking and project boards for task management and progress tracking.

info

There are many ways to perform GitHub repository operations like cloning, pushing, pulling, fetching, merging, and committing. Below are the alternatives:

  • GitHub Desktop

  • Git Command Line

  • VSCode Git Extention

This course will use GitHub Desktop as the tool to manage GitHub repositories. Feel free to use any Git alternative methods that you know how to use.

Install GitHub Desktop​

  1. Navigate to https://desktop.github.com.

  2. Download and Install the GitHub Desktop version for your OS.

  3. When prompted, login with your GitHub username / email and password.

  4. Verify the following by clicking on File >> Options…

  • Accounts - Ensure that your GitHub account is signed in.

  • Git - Ensure that your name and email is properly set.

Create Repository (Public)​

  1. Navigate to: https://github.com and click on the Sign in button.

  2. Enter your username / email address and password to sign in.

  3. On the left side of the page, click New button or op the top of the page, click on the + icon an choose New repository.

  4. Enter the repository name: COMP9783-FE-Public.

  5. Enter the Description: COMP9783-FE-Public Repository Lab.

  6. Choose Public as visibility type and click Create repository.

Clone Repository​

  1. Open GitHub Desktop and click on File >> Clone repository….

  2. Choose COMP9783-FE-Public and click on Clone.

Repository Local Path

Pay attention to the local path, this is where you would find the repository locally.

  1. Go to the local path and create a file named: readme.md.

  2. Edit readme.md and add the following text below (Replace First name and Last name with your own) and save the changes:

# This is my first public repository by First name and Last name

This is my first public repository description

  1. Open GitHub Desktop, ensure that the changes are visible, add any commit title and description and click on Commit to main.

  2. Click on Publish branch.

  3. Navigate to https://github.com and go to the COMP9783-FE-Public repository. It should display the formatted version of readme.md.

  4. Navigate to: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax to see the markdown syntax for formatting readme.md.

  5. Make changes to readme.md and try to do something similar:

readme

  1. Open GitHub Desktop, ensure that the changes are visible, add any commit title and description and click on Commit to main.

  2. Click on Publish branch.

  3. Navigate to https://github.com and go to the COMP9783-FE-Public repository. It should display the formatted version of readme.md.

Add source code​

  1. Open VSCode and open the folder COMP9783-FE-Public.

  2. In the terminal, create a Vite React app by running the following command:

npm create vite@latest . -- --template react

  1. Open GitHub Desktop, ensure that the changes are visible, add any commit title and description and click on Commit to main.

  2. Click on Publish branch.

  3. Navigate to https://github.com and go to the COMP9783-FE-Public repository. It should display the source code that was created previously.

Create a new branch​

  1. Open GitHub Desktop and click on Branch >> New Branch.

  2. Enter feature-branch-1 and click on Create branch.

  3. Open VSCode and open the folder COMP9783-FE-Public.

  4. Make changes to the source code.

  5. Open GitHub Desktop, ensure that the changes are visible, add any commit title and description and click on Commit to feature-branch-1.

  6. Click on Preview Pull Request. Ensure that the changes are visible.

  7. Click on Create pull request. This should take you to the GitHub repository and click on Create pull request to proceed.

  8. Click on Merge pull request, then Confirm merge.

Bonus - Deploy to Cloudflare​

  1. Navigate to https://www.cloudflare.com and click on Login in to login to the Cloudflare dashboard.

  2. On the left menu, click on Compute >> Workers & Pages.

  3. Click on the Create application button.

  4. At the bottom of the page, look for this text: Looking to deploy Pages? Get started, click on Get started.

  5. Click on the option: Import an existing Git repository by clicking on Get started.

  6. If you are doing this for the first time, there should be an option to add a GitHub. The system should prompt you to enter your GitHub credentials.

  7. With regards to Repository access choose Only select repositories and select COMP9783-FE-Public.

  8. COMP9783-FE-Public should now be listed as one of the available repositories to use. Ensure that it is selected.

  9. Click on Begin setup.

  10. Choose React (Vite) as the Framework preset. Click on Save and Deploy. This should initiate the building and deployment process.

  11. Once the app building and deployment have successfully finished, a page with the deployed URL should be presented. Click on the URL to see the deployed app.

Submission​

  1. Copy the GitHub repository and Cloudflare deployed app urls to the Comments section of the Lab submission on BrightSpace.