Setup Github Repo from Visual Studio Code

  1. Create the Project or directory on your file system. My local folder is called formik-sample. You can also create using the create-react-app Post here for a sample ReactJS App.
  2. Create a repository on Github. I’ve named it sample-form-reactjs.
  3. Click on Clone or Download. Copy the SSH link.
  4. Open the local folder in VS Code as created in Step 1.
  5. In the Terminal Window in VS Code, type the following commands:
  6. git config –global user.name someid
  7. git clone git@github.com:someid/sample-form-reactjs.git
  8. After this is done, just follow the same steps for git stage/commit/push etc.

For # 3:

However, if Step 5. gives error like below:

Check your network firewall settings if you’re doing it from Office. Try it out from your home and it should work.

Also, you can clone git@github which is SSH version but for that you have generate ssh keys and have to set it in local environment and if you don’t want to set up that then just use https version in the above clone command.

If you face branch related errors, since you might have already created a repo on Github, you can create a new branch as below:

git checkout -b some-sample

Then push the changes to the new branch:

git push --set-upstream origin some-sample

Setup Github and work with local and remote repositories

In this post, we’ll touch upon the basics of Github so as to get started with connecting to a repository remotely on GitHub and managing it locally. GitHub provides web hosting service to version control your source code using Git and make it available from anywhere.

GitHub is now also integrated with some cloud service providers like Microsoft Azure to directly publish your source code to Cloud services like App Service plans. You can also manage your CI/CD pipelines using Azure DevOps by directly using authorising using your GitHub account.

Create your SSH keys

After creating an account on Github, firstly you need to generate an SSH key on your machine say Mac, and add the private key to the SSH-agent running in the background. The public key requires to be added to your Github account under Settings and SSH and GPG keys.

Follow the below steps to setup your machine to work with Github remotely:

  1. Check for existing SSH keys here.
  2. Generate a new key and private key to SSH-agent here.
  3. Add public key to Github account here.

Once the above steps are completed, let’s get started with understanding the basic commands to kick-start with our first repository to version control our files remotely to GitHub.

Create your first repo
Note:

One very important thing to remember is to use Git Ignore for your configuration files or any files that contain passwords so that they don’t get checked-in to Github and become susceptible to security vulnerabilities.

Git uses it to determine which files and directories to ignore, before you make a commit. A .gitignore file should be committed into your repository, in order to share the ignore rules with any other users that clone the repository. Here is the help link.

Once the repository is created, let’s get started with the cloning of repository locally.  We can either do that through an https or SSH and we’re going to do this through SSH since we’ve already set up a key and it makes it a little bit more secure for us.

Please note: Change the commands accordingly for your Github account.

Copy the above SSH string and write the below command on your Mac or Windows terminal. Navigate to Desktop on your machine and then type:

cd Desktop/
git clone git@github.com:pulkitgulati/test-repo.git

Provide the pass-phrase for your SSH key and you should see a test-repo empty repository created on your Desktop. Now, cd to the repository and create a few files:

cd test-repo/
touch index.html main.js

You can check the created files in the folder or use ls command to verify. Check the git status to check the current status of the untracked files:

git status

Now let’s add and commit the files to the GitHub repository:

git add -A
git commit -m "adding files"

Now, verify the status with git status again. The thumb rule of committing any changes to the repository is to pull the latest files first and then making changes. Then repeat the process of adding them back. This helps when you’re working with a team of developers. Let’s create the master branch we’re currently working on and provide your pass-phrase. You would now see your files in the repository:

git push origin master

Now, let’s create a readme file using the Add Readme button and pull the latest repo files in our local repository.

Now, commit the file and use the below command to get the latest files locally from the master branch:

git pull origin master