Beginning ReactJS with TypeScript – Part II. Learn to Use Git and Git Hub

This is a three part series for setting up and getting started with ReactJS and Typescript. This part of the series will show how to create a GitHub public repository for the application we already created in part I.

The other parts in the series are…

• Beginning ReactJS with TypeScript – Part I. Setting up ReactJS workspace
• Beginning ReactJS with TypeScript – Part III. Setting up local workspace from GitHub repo

GitHub Repository - https://github.com/manish-patil/react-typescript

Introduction

This is a continuation of the earlier post, Beginning ReactJS with TypeScript – Part I, which showed how to setup a Hello World ReactJS application with TypeScript, WebPack using VS Code.

As mentioned in the earlier post, we will be creating a GitHub public repository for the application we already created. We will be using Git, locally to create branches, commit code and push our code to GitHub.

In the next part, we will see how to use the same GitHub public repo to setup the basic ReactJS application with TypeScript for our new work.

Setting Up Git Hub Account

So we start at the end of the previous post, where we had a running ReactJS application, saying, Hello World!!!!.

I – Create a GitHub account if you don’t already have one. I have mine, where I have already logged in.

II – Let's create a new public repository or project on GitHub by clicking on the Start a project button on the GitHub.com home page. Give the repository a name and a description and click on the Create repository button.

Once the repository is created on GitHub, you are shown a page similar to below:

This repository would have no files. We will push all the files from our local computer to this repo.

Setting Up Git Locally

III – Now back to our computer and to the folder where our ReactJS application resides. We need to initialize Git for our local workspace using the command:

git init

This command will initialize an empty Git repository with default branch master. The current Git branch master is shown in green with brackets.

IV – As the above step initializes a local Git repository, it still doesn’t have a connection between the local codebase and the GitHub remote repository, we created in step II. Let's make that connection. Locally in Git Bash, type the following command and hit enter.

git remote add origin https://github.com/manish-patil/react-typescript

The command will add a reference to the remote repository to the locally initialized git repository. As you can see from the below image, we can now Fetch from and Push to the remote repository https://github.com/manish-patil/react-typescript. Also note here the Head branch of the remote repo is unknown. We will push locally created branches and code to the remote repo next. If you are creating the repo, from your login, the remote repo location would be different.

V – In order for us to push local files to remote repo, we need to first select the files to commit and then commit the files. Before we do that, we need to understand which files types should be committed. In our local workspace, the node_modules folder contains all the Node packages, required by our application to setup and execute. All the required packages and their versions are mentioned in the package.json file. So technically, if we only committed the package.json file and not the node_modules folder, we should be good. Don’t worry, we will see how and why in the next post.

So to tell Git, we need not consider the node_modules or the dist folder for commit, we need to create a file called .gitignore and mention the folder names in that file. You can very well add more file, folder names to that file. Please note, it is not possible to create a file like .gitignore, in Windows, as Windows would think this is a file with no name and .gitignore file extension – you will either have to use VS Code or Git Bash with the following command to create this file.

touch .gitignore

Hitting git status now shows all the files which are currently untracked, in red, meaning not yet staged/selected for commit. Interestingly, the list ignores the node_modules and the dist folder but shows the .gitignore file.

VI – Now let's stage and commit. Staging in Git is, selecting the files to be committed. We use the following command to select all the changed files/folders (excluding those which are ignored) in the workspace for commit. Currently, all our files are changed as none are committed.

git add .

There are other variations to the command as well to select specific files. The command git status now shows us the following, all the files which are staged are in green, which are “Changes to be committed:”

We commit the staged files with the command:

git commit –m [commit message]

Pushing Code to GitHub

VII – Now as our files are committed to our local repository, it is time for us to push the changes to the remote repository at Git Hub. We have already linked our local repo to the remote on Git Hub. The command to push the local changes to the remote repository would be:

git push origin master

Here, we are asking Git to push our local repository with its commit and history to a remote named - origin and branch named - master.

Now if I refresh my GitHub page, I see the below. Where the branch is master, all the files are now uploaded and there is no node_modules or dist folder.

Adding a New Branch

VIII – Until now, our index.html page is being served directly from the file system, but a web application cannot run off the file system. For development, we at least need a local development server. We have many options, but I am going to use the webpack-dev-server here. You can obviously choose a server which best fits your needs. So rather than adding this development server to the master branch, I would create a new branch and add the server to it.

In Git Bash, create a new branch named webpack-dev-server and checkout the branch as below:

git checkout -b webpack-dev-server

Now our working branch is webpack-dev-server and not master.

In Git Bash or VS Code terminal, execute the following command, which would install the webpack-dev-server as a development dependency.

npm install –save-dev webpack-dev-server

In the package.json file, update the scripts -> build node from “webpack” to “webpack-dev-server”.

The updated package.json file will look like below:

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}

Execute the below command, which will fire up the webpack dev server at http://localhost:8080/.

npm run build

To execute our application from the Development server - navigate to localhost:8080.

Now let's commit the changes to the package.json file and push the new branch to Git Hub as below:

Now the Git Hub repo would show 2 commits and 2 branches.

In the next post, we will see how we can clone this Git Hub repo to our local computers and checkout specific branches which we can use to start new development and not go through the entire process of setting up the code as seen in the previous post.

History

• 13^th November, 2017: Initial version