Click here to Skip to main content
13,258,055 members (69,356 online)
Click here to Skip to main content
Add your own
alternative version

Stats

7.8K views
6 bookmarked
Posted 23 Oct 2017

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

, 13 Nov 2017
Rate this:
Please Sign up or sign in to vote.
This is the second part in the series, which will show how to setup the development environment for ReactJS with Typescript. This part in particular will focus on creating a public GitHub repository for the code created in the first part of the series.

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…

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 already don’t have one. I have mine, where I have already logged in.

II – Lets 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. Lets 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 lets 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 non 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 lets 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

Keep a running update of any changes or improvements you've made here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

ManishHPatil
Software Developer
India India
Be ahead of the curve.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
PraiseMessage Closed Pin
24-Oct-17 21:09
memberMember 1348393624-Oct-17 21:09 
QuestionMy vote of 5! Pin
jediYL24-Oct-17 15:06
professionaljediYL24-Oct-17 15:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 13 Nov 2017
Article Copyright 2017 by ManishHPatil
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid