Share
Explore

Lecture: Connecting Visual Studio Code to GitHub

Note: Visual Studio uses the GIT client on your Operating System:


⁠
image.png
⁠
⁠

If NOT: Search for any GIT client for your OS:
⁠
image.png
⁠
⁠

Introduction:

Every developer needs a way to track changes, collaborate, and version their code.
Rollback to previous version.
Branching.
Git Issues and Git Actions.
Git provides the foundation for this, and platforms like GitHub extend Git's capabilities, offering cloud storage, collaboration tools, project management.
Today, we'll learn how to connect a local repository in Visual Studio Code to a remote GitHub repository (the Instructor’s Repository to catch the new code changes and lab instructions into your local environment).

Objectives:

Understand the basics of Git and GitHub:
⁠
⁠
Initialize a local Git repository in Visual Studio Code.
Connect the local repository to a remote GitHub repository.

The Process:

Local Repository: This is your project on your computer. Every Git project has a local repo.
Remote Repository: It's like a backup on the cloud (e.g., GitHub) that also allows collaboration.
⁠

Lab: Connect VS Code to GitHub

Prerequisites:

⁠
Visual Studio Code
⁠
installed.
⁠
Git
⁠
installed.
GitHub account.

Steps:

Set Up Local Repository:
a. Open your project in Visual Studio Code.
b. Open the terminal in VS Code (View > Terminal).
c. Initialize a new Git repository:
bashCopy code
git init
Commit Your Changes:
Before connecting to a remote repository, ensure your local changes are committed.
a. Add all files to the staging area:
bashCopy code
git add .
b. Commit the changes:
bashCopy code
git commit -m "Initial commit"
Create a New Repository on GitHub:
a. Go to
GitHub
⁠
.
b. Click the '+' icon at the top right and select New repository.
c. Name it react (or another name of your choice). Choose other settings as per your requirements and click Create repository.
Connect Local Repository to GitHub:
a. In your created GitHub repository, you'll see a section named "...or push an existing repository from the command line." Copy those commands.
b. Return to Visual Studio Code, and in the terminal, paste the commands. It should look something like this:
** Here is the Instruction to make a local Clone of a GitHub Repo (your own or somebody else's)

github repo clone computationalknowledge/f23REACT
Verify the Connection:
Go back to your GitHub page and refresh. You should see your code now present in the react repository.
⁠

Homework:

Make changes to your local code in Visual Studio Code.
Commit those changes and push them to your GitHub repository.
Observe the changes reflected on your GitHub page.
⁠

Conclusion:

By now, you've taken a significant step in your development journey. Being able to connect local projects to remote repositories is essential for collaboration, version control, and backup. As you delve deeper into development, tools like Git and platforms like GitHub will become second nature to you.

Instructions to Clone a GitHub Repository:

Prerequisites:

Ensure you have Git installed on your local machine. If not, you can download it from
Git's official website
⁠
.
A GitHub account (recommended but not necessary for cloning public repositories).

Step-by-Step Guide:

Open GitHub Repository:
Navigate to the repository on GitHub using a web browser:

https://github.com/computationalknowledge/f23REACT
Copy the Repository URL:
On the main page of the repository, locate the "Code" button (usually green).
Click on the button. A dropdown menu will appear.
Ensure that the "HTTPS" tab is selected.
Click the clipboard icon to the right of the URL to copy it. The URL should be:
https://github.com/computationalknowledge/f23REACT.git
Open Terminal or Command Prompt:
WE will do this in the Terminal of VSC.
For Windows: Press Windows + R, type cmd, and press Enter.
For Mac: Press Command + Space, type terminal, and press Enter.
For Linux: Depending on the distribution, you can use shortcuts or search for 'terminal' in the application menu.
Navigate to Desired Directory:
In the terminal, navigate to the directory where you want to clone the repository. For example, to navigate to the Desktop:
For Windows: cd Desktop
For Mac/Linux: cd ~/Desktop
Clone the Repository:
Enter the following command into the terminal and press Enter:
bashCopy code
git clone https://github.com/computationalknowledge/f23REACT.git
Verify the Clone:
After the cloning process is complete, a new directory named f23REACT will be created in the specified location. Navigate into this directory using:
bashCopy code
cd f23REACT
Run the following command to see the remote repository's details:
Copy code
git remote -v
It should display the URLs of the fetched and pushed repositories, pointing to https://github.com/computationalknowledge/f23REACT.git.

Open in Visual Studio Code (Optional):
If students are using Visual Studio Code, they can open the cloned repository in VS Code by running:
cssCopy code
code .
Ensure they have Visual Studio Code installed, and the code command is available in the terminal. If it's not, they can
follow the instructions here
⁠
to set it up.
And that's it! Students now have a local copy of the f23REACT repository from GitHub on their machines. They can now work on it, make changes, and if they have the necessary permissions, push updates back to the remote repository.

How to manually make directories on Github


Manually creating directories (or folders) directly on GitHub involves a bit of a workaround, as GitHub does not provide a direct "create folder" UI option. However, you can achieve this by adding a new file and using the folder path in the filename. Here's how you can manually create directories on GitHub:
Navigate to Your Repository:
Open your target repository on GitHub.
Add a New File:
Click on the "Add file" button and select "Create new file".
Enter the Directory Path:
In the name field of the new file, you can define the directory structure using slashes (/). For example, if you want to create a directory called myFolder and within that another directory named subFolder, you would type:
bashCopy code
myFolder/subFolder/
After the final slash, add a placeholder filename like .gitkeep (it's a convention to use .gitkeep to preserve otherwise empty folders in Git). So the full text would be:
bashCopy code
myFolder/subFolder/.gitkeep
Note: .gitkeep is not a special Git file. It's just a convention to push empty directories to repositories. The name itself has no special significance.
Commit the New File:
Scroll down to the bottom of the page. You'll see the "Commit new file" section. Enter a commit message, and choose to commit directly to the main branch (or create a new branch and start a pull request). Click the "Commit changes" button.
Verify the Directory:
Once you've committed the changes, you'll see that the directories have been created with the placeholder .gitkeep file inside.
Remember, this method is essentially a workaround, and if you're working with Git locally on your machine, it's more straightforward to create directories and push them to GitHub. But for quick edits or changes directly on the GitHub platform, this method does the trick.

Let's break down the GitHub integration process in Visual Studio Code into simple steps.

A: Make the GitHub Repository:

On GitHub:
Go to
GitHub
⁠
and log in to your account.
Click the '+' icon in the upper right corner and select "New repository".
Fill in the repository name, description, and other details.
Click "Create repository".

B: Clone the GitHub Repository to Your Local Machine:

On GitHub:
Navigate to the main page of your repository.
Click the "Code" button.
Choose the "HTTPS" tab.
Copy the repository URL.
https://github.com/computationalknowledge/react_projects.git
⁠
⁠
In Visual Studio Code:
Open VS Code.
Press Ctrl+Shift+P to open the command palette.
Type "Git: Clone" and select the option.
Paste the repository URL.
Select a directory where you'd like to clone the repository.
Once cloned, VS Code will prompt you to open the cloned repository. Click "Open".
Move Your React Project Files:
If you have an existing React project that you want to move into this repository, you can simply copy all the project files into the cloned repository directory.
Back in VS Code, you will see the changes in the Source Control tab (icon that looks like a branching line or Ctrl+Shift+G to open).

C: Push and Pull as Needed:

Initial Push:
If you've moved your React project files into the cloned repository:
Go to the Source Control tab in VS Code.
Enter a commit message describing your changes.
Click the checkmark icon (or press Ctrl+Enter) to commit.
Click the ellipsis (...) at the top of the Source Control pane, then click "Push".
If prompted, enter your GitHub credentials.
Regular Workflow:
Pull: Before starting your work, especially if you work in a team, always pull the latest changes from the remote repository. In VS Code, you can click the sync icon in the bottom left corner or use the "Git: Pull" command from the command palette.
Commit and Push: As you make changes, regularly commit and push them. Use the Source Control tab to stage changes, enter a commit message, and commit. After committing, use the sync icon or the "Git: Push" command to push your commits to GitHub.
Remember, VS Code's GitHub integration can also be enhanced using extensions like the official "GitHub Pull Requests and Issues" extension, which allows you to manage PRs and issues directly from the editor.
With these steps, you can effectively manage your React project in Visual Studio Code with GitHub integration.


"PRs" stands for "Pull Requests". In the context of GitHub:
Pull Requests (PRs): They are proposals to merge changes from one branch into another, often from a forked repository to the main repository. PRs allow developers to discuss and review code changes before they are integrated.
Issues: These are used to track tasks, enhancements, bugs, and other kinds of questions that are intended for discussion.
The "GitHub Pull Requests and Issues" extension for Visual Studio Code allows you to manage both pull requests and issues directly from within the VS Code editor. This can be especially handy, as it can streamline your workflow by reducing the need to switch between the GitHub web interface and your code editor.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.