Preparing GitHub for Reactive Tutorials and Projects

There are several ways to interact with GitHub. In this course, we will use GitHub Desktop, which provides a visual interface to interact with GitHub and is independent of any IDEs. If you are proficient with git, you don’t have to use GitHub Desktop. However, we can only help with GitHub Desktop, so if you use anything else, you will be on your own.

• If you do not have a GitHub Student account, please get the GitHub Student Developer Pack so that you have access to GitHub Wiki, which you will need for your course project.

GitHub requires a personal access token to use HTTPS git. Please follow GitHub’s instructions to create a classic personal access token. Create a classic personal access token instead of a fine-grained one as students have had problems with the fine-grained access tokens.

• Download and install GitHub Desktop
• Link to your GitHub account: on GitHub Desktop navigate to Preferences > Accounts > Sign In. A window will pop up and you can choose between signing in using your browser and signing in using your GitHub username and password

Create your reactive GitHub repo

On your browser, create a new, PRIVATE reactive repo with your GitHub account:

1. In the upper-right corner of your GitHub page, use the drop-down menu labeled +, and select New repository (screenshot).

2. Name the new repo reactive and set its visibility to Private.

3. Check Add .gitignore, choose any (you will be overwriting the .gitignore later, this is just the simplest way to create a non-empty repo.)

4. Click the big green Create repository.

Note: for this and subsequent labs, we will assume your folders/directories are named according to the “canonical” names used in the spec. You can choose a different name other than reactive, but be aware that you’d have to map the names used in the specs to your naming scheme in all labs, for both front and back end.

Please invite eecsreactive@umich.edu as collaborator to your repo:

• On your GitHub site on your browser, click on Settings, the right most menu item (you may have to click on the ... to reveal it).
• Click on Manage access on the left menu, and click on the big green Invite a collaborator button
• Enter eecsreactive@umich.edu and click the matching name that shows up
• Click the big green button, Add eecsreactive@umich.edu to this repository.

If you’re working on the lab as a team, please keep your lab’s solution in ONE member’s reactive git repo ONLY. Invite your team mate to your repo by navigating to Settings > Manage access > Invite a collaborator as per above and enter your team mate’s GitHub account or UM email address.

Clone your reactive GitHub repo to your laptop

• Navigate to your newly created reactive GitHub repo on your browser
• Click on the green Code button and select Open with GitHub Desktop
• Tell your browser to allow GitHub Desktop to launch

• In the Clone a Repository dialog box that GitHub Desktop pops up, edit the Local Path text field to where you want to put your reactive repo on your local host and click Clone. For example, if you have a folder name courses on your home folder, you can enter /Users/yourusername/courses/ or, on Windows, C:\Users\yourusername\courses\.

  This will create a new folder under Local Path, which we will refer to as YOUR*TUTORIALS. If your Local Path were /Users/yourusername/courses/ as per the above example, YOUR*TUTORIALS will be /Users/yourusername/courses/reactive/.

To prepare your git repo:

1. Download a copy of the course gitignore and save it in YOUR*TUTORIALS as .gitignore (note the leading dot before the filename). If your laptop OS prevents you from saving a file with a leading dot in its name, download the file to your YOUR*TUTORIALS as gitignore without the leading dot and then run in Terminal or PowerShell:

    laptop$ cd YOUR*TUTORIALS
    laptop$ mv gitignore .gitignore
   

   This overwrites the .gitignore GitHub added earlier when creating your repo.

2. Create a sub-folder YOUR*TUTORIALS/chatter to hold your project files for the chatter lab.
3. From GitHub Desktop commit these changes and push them to your reactive repo on GitHub.

Resources

• GitHub student pack

Following are some useful resources to familiarize you with GitHub Desktop.

• Activity: Use the GitHub Desktop client
• Git basics
• Connecting your git repository with a remote server
• GitHub Docs
• How to revert a commit
• Understanding and resolving merge conflicts
• Stashing and rebasing

---

Prepared by Mark Wassink, Rithika Ganesh, and Sugih Jamin

Last updated: August 20th, 2025