Git Workflow For High Productivity

Credit: Unsplash

TL;DR Using the proper Git workflow helps increase productivity and reduces git-related bug fixing time for teams as well as individuals.

What This Article Covers

• Setting up a simple Nodejs app
• Proper Git workflow

Prerequisites:

• Basic understanding of NodeJS and ExpressJS
• Basic understanding of Git
• Node and NPM installed on your machine
• Github account

Getting Started

For simplicity, we will be setting up a simple app that displays Hello World on the browser. The project files will be hosted on Github. There are a couple of ways to set the Github repo for our project.

1. Create a repo on Github without initialising it with a README or .gitignore, then add the git remote url to the local project.
2. Create the repo on Github and initialise it with README and .gitignore files, then clone the project into your local machine.

We will use the second method for setting up our project.

Setting up a simple Nodejs app

The location of the project folder would be dependent on the machine you are using. For Windows users running Wamp, use the location C:\wamp64\www, for Xampp use the location C:\Program Files\XAMPP\htdocs. Mac users can create the folder on the Desktop or your preferred location.

Head over to Github and create a new repo called simple-nodejs-app as shown in the picture below.

Initialise the repo with a README and click on Create repository. After creating the repo, the next page should look like this:

Click on the button Clone or download to get the download link the head over to your local machine, open a new terminal window and clone the repo using the command below.

$ git clone [https://github.com/fuchodeveloper/simple-nodejs-app.git](https://github.com/fuchodeveloper/simple-nodejs-app.git)

This will create a new folder called simple-nodejs-app,navigate into the newly created folder using the command below:

$ cd simple-nodejs-app

For this project we will have a master branch which holds production code, staging branch for production ready code, and other branches to reflect what we are working on. Each feature, bug or chore added to the project will be in a separate branch and contain a single commit message. The reason for this is to make it easy for us to revert back to any branch knowing that the branch contains only a certain feature or bug. This could be really helpful in the situation that something goes wrong and we need to revert back to a certain feature in the project.

Setting Up Base Application

Create a chore branch to handle initial setup of the base application.

$ git checkout -b chore/setup-base-application

NB: The -b takes you to the new branch after creating it.

Go ahead to initialise the project using npm by running the command below:

$ npm init

This will bring up a series of questions which you could answer or press enter key to use the defaults. You can see the finished screen below.

Install the necessary dependencies for our project using the command below.

$ npm install express --save

We will make use of ES6 in our project, for this reason we will need to add an ES6 compiler, called Babel. Head over to the Babel site to find out more about this awesome compiler. Babel compiles ES6 code into the more browser compatible ES5 thereby allowing us make use of modern JavaScript code without being bothered about how the app will be handled by browsers that are yet to understand ES6 code.

Run the command below to setup Babel in the project.

$ npm install --save-dev babel-cli babel-preset-env

After the installation, open your favorite code editor and create a file in the root folder of the app called .babelrc and paste the code below:

{
  "presets": ["env"]
}

Create a new file called index.js in the root folder and paste the following code

import express from 'express';

const app = express();

const port = process.env.port || 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}`));

Create a new script in package.json to easily run the app with one command. The final package.json file is shown below:

{

"name": "simple-nodejs-app",

"version": "1.0.0",

"description": "SImple git repo to illustrate git workflow",

"main": "index.js",

"scripts": {

"start": "babel-node -- index.js",

"test": "echo \"Error: no test specified\" && exit 1"

},

"repository": {

"type": "git",

"url": "git+https://github.com/fuchodeveloper/simple-nodejs-app.git"

},

"keywords": [

"nodejs",

"node",

"express",

"git"

],

"author": "Fredrick Mgbeoma",

"license": "MIT",

"bugs": {

"url": "https://github.com/fuchodeveloper/simple-nodejs-app/issues"

},

"homepage": "https://github.com/fuchodeveloper/simple-nodejs-app#readme",

"devDependencies": {

"babel-cli": "^6.26.0",

"babel-preset-env": "^1.6.1"

},

"dependencies": {

"express": "^4.16.2"

}

}

To run the app simply type the following command on your terminal:

$ npm start

Visit the url http://localhost:3000 in any browser you have installed locally and see the text displayed.

Hello world

To prepare for pushing to Github, create a file called .gitignore and add the folder name node_modules/ .

Add the new updates and commit like so.

$ git add .
$ git commit -m 'chore(setup-base-app): install necessary dependencies and setup base application'
$ git push origin chore/setup-base-application

The above adds the new updates made to the project, a commit message and finally takes all the updates from the local machine to the online repository.

Create a new branch called staging by typing the name staging in the text field find or create a branch... then press enter to create the branch.

Following best practices, we raise a pull request, PR, to the staging branch by clicking on the Compare & pull request button. This shows the next screen below:

Pull request

You could add a reviewer to the pull request by clicking on the gear icon besides Reviewers at the right hand side of the page, then supply their email address. The reviewer gets notified to go through your pull request and merge it if everything is done properly.

Now you can go grab a coke. That was easy right? 😄

If you liked this article give it some 👏 and share with your friends.

First published - Codeburst