Workspace Repository Setup

Before beginning these instructions you should have first updated your operating system and then installed the required software (Docker Desktop and Visual Studio Code).

0. Find Your Canvas UNC E-mail Address

Canvas UNC e-mail addresses typically end in @live.unc.edu or @email.unc.edu!

Find your Canvas e-mail address by logging into Canvas, clicking on “Account” in the top right corner, selecting “Settings”, and looking under the Email field on the right.

Use your Canvas e-mail address when you login to Gradescope and register for GitHub.

1. Register for GitHub

GitHub is for backing up your course Workspace Repository and for downloading course materials.

You can think of GitHub as a social network where people and organizations share and collaborate on code with one another. Organizations like NASA, NOAA, Peace Corps, Washington Post, New York Times, and so on, host projects publicly (and privately) on GitHub. It’s a valuable service for software engineers, data scientists, research teams, and more.

Your coursework will have its own private “git repository”. The technology we use for backing up versions of our projects and transmitting them to or from the internet, hosted on GitHub, is called git. Visual Studio Code has git support built into it. Git is a professional version control tool we use in limited ways in COMP110, but if you continue on in a field that involves programming and data you’ll likely encounter it again.

  1. Register for a GitHub account with your primary UNC address: https://github.com/
    • You are encouraged to choose your ONYEN as your username, if it is available (not required)
  2. After registering, edit your profile from this page: https://github.com/settings/profile
    • Be sure your name and email match what is in Canvas
    • Fill out the rest of your GitHub profile with a high quality photo of yourself, a brief bio, UNC Chapel Hill as your “company”, and Chapel Hill (or home) as your location if you are going to continue in a field that involves programming (computer science, data science, information science, and so on). Think of this as a secondary LinkedIn when it comes to future opportunities, because that’s often how employers and graduate schools look at it.

2. Login to Github in VSCode

  1. Open the VSCode application on your computer.
  2. In the bottom left corner, look for a user/profile icon above a settings gear icon. Click it.
  3. Click “Sign in” or “Sign in to sync settings”
  4. This will open a browser window. If you are not already logged into GitHub, you will be prompted to login. If you are logged in, you may get redirected back to VSCode. Follow the prompts until you are taken back to VSCode.
  5. Confirm you are logged in by clicking the user/profile icon in the bottom left corner of VSCode. You should see your GitHub username followed by (GitHub).

3. Installing VSCode Dev Container Extension

VSCode can be customized with extensions specific to the types of work you use it for. We need a specific extension to enable a feature called “DevContainers” short for Development Containers. This feature of VSCode, combined with Docker, is what will ensure you and all of your peers in the course have exactly the same software setup.

  1. From the View menu, select Extensions
  2. In the search box, type: “Dev Containers”.
  3. Click the top result that is verified as published by Microsoft.
  4. Click the Install button to install the extension.
  5. If prompted to reload the VSCode window, accept.

4. Setup your Course Workspace on GitHub

  1. Navigate a web browser to https://classroom.github.com/a/0L3W6s_X
  2. Click “Skip to the next step” if prompted to select your user / identification
  3. Click “Accept this Assignment”
  4. When the workspace is getting setup you may need to refresh until it tells you you’re ready to go!
  5. Click the link to your personal backup repository that looks something like this https://github.com/comp110-24s-003/comp110-24s-workspace-KrisJordan (except instead of KrisJordan you will see your GitHub username).

5. Setup your Workspace in Visual Studio Code

  1. In VSCode, from the View menu select Command Palette
    • You’ll use the Command Palette a lot so it’s worth trying to remember its shortcut!
    • Windows: Control+Shift+P
    • Mac: Command+Shift+P
  2. Type in “Git: Clone” (without the quotes) and press Enter.
  3. Select “Clone from GitHub”
  4. Under Repository Name, look for comp110-... where the your GitHub username is found at the end of a workspace repository. Select your workspace.
    • If you do not see your repository, be sure you are logged into VSCode with your GitHub account per part 2 above.
  5. You will be asked where you want your course workspace repository to be saved on your computer. Accepting the default suggestion is OK, but if you have a folder you would prefer to keep the course work go ahead and select it. Moving your workspace after this step and should be avoided until the semester ends.
  6. Press OK when asked if you would like to Open the repository after it downloads.
  7. After a second or two, you should see a popup telling you “Folder contains a DevContainer configuration file.” Click the blue button Reopen in Container. This step will take a few minutes to complete.
  8. If you accidentally close this pop-up, you can open the Command Palette once more (step 1) and type in: Reopen in Container and press enter.

6. Confirm Everything is Good to Go

Phew, you’re almost to the end of setup! Hang in there!

VSCode should now be running in what is called a “Dev Container.” To confirm this, look in the lower left corner of VSCode, in the blue box, you should see “Dev Container: comp110-…”. If you do not, be sure you followed Steps 7/8 and try opening your command palette and running “Reopen in Container” once more.

Once it’s done, in the Explorer pane, you should see .devcontainer, README.md, and welcome.py.

Let’s run the welcome program! Open the terminal by going to the Terminal menu and selecting New Terminal. You should see a terminal window open at the bottom of VSCode. In the terminal, type python -m welcome and press enter. You should see a welcome message printed to the terminal!

Let’s be sure you are able to exit out of VSCode and find your work again. Go ahead and close VSCode. It will take a few seconds for your DevContainer to fully shut down in the background, so count to ten, take a few deep breaths, and be proud of setting up a modern, professional software development environment on your personal laptop! Then open VS Code again. If you see the same files in the left-hand sidebar, and “Dev Container: comp110-24s-003” in the bottom left corner: great! Keep reading, though, so you know what to do in the future if you do not see your workspace.

If you do not see your workspace files in the Explorer sidebar, go to File, select Open Recent, and look for the topmost entry that has comp110- in it and ends in [Dev Container] and select it. This is how you can get back to your workspace most easily in the future.

7. Get Started on EX00 - Hello World

You are now ready to begin the first exercise of the course, “Hello, world!”. Get started here: EX00 - Hello World

Contributor(s): Kris Jordan