How to Add a VS Code Project to GitHub

Let’s try to add a Visual Studio Code project to Github.

Not difficult, but I don’t think I found a single web page that shows step by step how to add a project to GitHub.

So why not? Let’s add one post to the site 🙂

Let’s start by creating a test project in Visual Studio Code and then push our project to a new repository in GitHub.

We are going to be using:

• Visual Studio Code 1.35.1
• Node.js 10.2.0
• Express-Generator 4.16.1

Create a Express Node.js Web Application

Express is a very flexible, clean, unobtrusive and minimalist Node.js application framework.

Express generator is the generator tool to create a simple skeleton.

Let’s start from the beginning:

1. Install Node.js (https://nodejs.org/en/)
2. Open a Powershell window.
3. Install express-generator globally by running:

   npm install express-generator -g

4. Change the directory to your repository root. Example: d:\repo
5. Create a new node.js express web application using the express-generator:

   express -v ejs -c sass nodejswebapp

6. Change directory to the newly added project folder:  \nodejswebapp
7. Install dependencies by running:

   npm install

8. Open the project in Visual Studio Code:

   code .

9. Run the app within VS Code. Open Terminal and run:

   set DEBUG=nodejswebapp:* 
   npm start

That’s all there is to start running the web application.

You can open your browser and navigate to: http://localhost:3000/

node.js express web page

Adding your VS Code Project to GitHub

Next we are going to add our newly created project to GitHub.

My instructions go back and forth a little, is my path of discovery  and I am sure there is a more direct way, but this is a good start for me.

In some instances I want to use some VS Code commands (or GUI menus) to accomplish certain tasks, I am trying to familiarize with this tool also.

1. Create a new repository on GitHub. Enter name (match the name with your new project name), description, make it PRIVATE (or PUBLIC), and do not create a README file just yet.

2. On Visual Studio Code, click on “Source Control” on the vertical menu (or press Ctrl + Shift + G). Then click on “Initialize Repository” on the top right (this will create the .git folder in your project).

VS Code: Source Control

3. Visual Studio Code will now show all untracked changes ready to be staged.

4. At this point is a good idea to add a local .gitignore file in the root of your project.

Update your Local Git Config to Use the Correct Credentials

As you might remember, I am using a couple of Git repositories: GitHub and GitLab.

Obviously a global Git configuration help is not going to be able to keep track of each of these environment’s credentials at the same time.

This is why I need to update the local config file to include my user.name and user.email.

Your local Git configuration file should be located in side your .git folder (created on step #2): \.git\config

5. Open a Powershell window, and change directory to the root of your project (at the same level as the .sln file)

6. Run the following to update both fields on the local config file:

git config user.name "myusername"
git config user.email "myemailaddress@something.com"

These are the username and email associated with your GitHub account.

7. Add a remote (you can read more about remotes here: https://help.github.com/en/articles/adding-a-remote):

git remote add origin https://github.com/{myusername}/nodejswebapp.git

You can verify the creation of the remote running this command:

git remote -v

8. On Visual Studio Code is time to staged all the code changes. Click STAGED ALL FILES next to the CHANGES tab.

VS Code: Stage All Changes

9. To push the staged changes you need to run these commands:

git commit -m "initial commit"
git push origin master

Like I said before, feel free to use a Powershell window, a git bash shell or the Terminal window in Visual Studio Code. The results should be the same.

10. You can open your GitHub repositories and the new project code should be now there.

Granted, I need to work a bit more on my .gitignore file (I don’t think package-lock.json should be there).

But other than that, it looks wonderful.

Like I said before, I did not find any single web page that shows step by step how to upload your Visual Studio project to your GitHub repository, hope this helps someone.

If it does, please remember to share.

Feel free to add suggestions, questions, comments, better way of doing things or just say hello using the comments section below.