Explore

Lecture: Connecting Visual Studio Code to GitHub

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

⁠

If NOT: Search for any GIT client for your OS:

⁠

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:

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.