Part 2: Setting Up Your Development Environment.

Everything you need to know from setting up your development work environment to running your Node server.

Setting up your development environment

This is the second part of this series. Click here to read Part 1.

In the first part of this series, I introduced the purpose of writing this article and its scope. I also defined what we will be building as well as the user story that satisfies our users. If you missed that, please click here. That’s the first part.

So with that out of the way, let’s get started with setting up our development environment. Here are the tools you will be expected to work with:

1. A text editor: I choose to work with VSCode, but by all means use whichever you are comfortable with. The most popular are VSCode, Atom, and Sublime Text. A text editor is where you’ll type all of your codes.
2. Git: Git helps you track the changes in your codes. I have an article that will get you started if you are new to git, click Don’t Get Stuck With Git. If you haven’t installed git, please do so by clicking here.
3. NodeJS: Node is a JavaScript runtime environment built on Chrome V8 JavaScript engine. Node allows you write JavaScript for server. To download Node to your computer, please click here. Node also comes with its package manager (NPM). We will discuss this later.
4. Postman: Postman is an awesome tool for testing our HTTP methods. What are HTTP methods you ask? Simple, see here. To download Postman, please click here.

I trust I didn’t loose our first-timers, pretty much download and install all the tools above if you don’t already have it. You might want to read more about each tool by actually opening the embedded links. With this out of the way, let’s get to see some codes.

Oh yeah, I should mention there is such a thing as workflow. If you are going to work with a team, I hope you are, or contribute to open source projects, you should understand what workflow the project members work with. The most common is the gitflow workflow, to read more, please click here. We will be using the gitflow workflow in this project, this means we will be creating specific branches for specific features and merging the branches to a development branch when we are done.

I probably forgot to mention, you will need a GitHub account. If you don’t have one, don’t worry, creating one is easy. Simply click here to work around it. Good. While you’re there, create a new repository for this project.

Congrats to you if you have gotten to this point. Don’t be in a hurry, notice I checked the README, the .gitignore drop-down also reads Node and the license reads MIT.

Here’s my repo

Notice by default, your git repository is set to master, however in the gitflow workflow, we don’t commit to the master branch, here’s why.

Next, we will clone this project to our local computer. We will do this using a simple git command. Click on clone, and copy the link provided. We will paste this code in our GitBash. Remember, this was the second tool we downloaded.

// Clone the project
git clone https://github.com/blackdevelopa/ProjectSupport.git
// To move into the project’s directory.
cd projectsupport
// To create and checkout to new branch.
git checkout -b develop
// To launch VSCode on local computer.
code .

So, here’s what I did. I cloned the project off Github, moved into the project’s directory, and created a new develop branch off the master branch. Our develop branch will be our active branch, we will be merging new features to this branch as we progress.

Done? Awesome. Next is the package.json file.

I just created the package.json

The package.json is an awesome way of managing our locally installed dependencies. Dependencies are what our application depends on to work. To create the package.json, we simply initialize NPM. NPM is Node Package Manager and practically gives us access to a large registry of packages that we can simply plug into our code base. Read more here.

Here is how it works:

npm init

This initializes npm by requesting specific information from you with which to create the package.json. Type this in your git integrated terminal using Git Bash, or VSCode git integrated terminal. Another reason I love VSCode. However, you can skip the request and accept the defaults with the code below:

npm init --yes

If you did everything right, you should have your package.json file, which means you are now ready to install the dependencies we will need to build our application.

First, we will install Express. Express is a NPM that enables us build web applications with ease. You can read a bit more here.

npm install express --save

I just installed express.. Yay!

The code above will install express to our list of dependencies and this comes with a node_modules folder we don’t want to ever push online. However, we already sorted this out with the .gitignore file we checked when we created this repository. This tells git not to monitor whatever changes that happens within that directory. We will need to commit these changes, but first, let’s create our application’s entry file.

Our entry file contains the set of instructions needed to start our application. With that said, let’s setup our entry file.

touch app.js
start app.js

The first command creates an app.js file for us. The second command opens up the file. The start code works for Windows, am not sure about other OS.

// Call in installed dependencies
const express = require('express');
// set up express app
const app = express();
// set up port number
const port = 5035;
// set up home route
app.get('/', (request, respond) => {
  respond.status(200).json({
    message: 'Welcome to Project Support',
  });
});
app.listen(port, (request, respond) => {
  console.log(`Our server is live on ${port}. Yay!`);
});

Line 2 and 5 basically calls and sets up our express app. Line 8 sets up the port number. Line 11–19 sets up our home route. What is the meaning of request and respond you may ask? Awesome, see here. Also, what’s status(200)? Awesome, see here. Notice, we use ES6 template literals in line 18 rather than using concatenation.

// This is ES5 concatenation
console.log('Our server is live on' + port. + 'Yay!');
// This is ES6 template literals
console.log(`Our server is live on ${port}. Yay!`);

Finally, let’s start our server.

node app.js

Yay! Our server is live.

It worked on our browser too…

Now, our server is running and we have successfully set up our development environment, it’s now time to build on this. However, there are a few more things we must do. First, we should commit our files. Run the code on your terminal.

// To add all your files
git add .
// To commit all your files to local repository
git commit -m 'initialized and set up our server'

We will push to our remote repository later, after installing some salient development dependencies. We will be installing the following:

1. Eslint: This is an open source project that provides a pluggable linting utility for JavaScript for cleaner codes. Basically, Eslint helps us write cleaner codes. Read more.
2. BabelJS: This is a compiler for writing next generation JavaScript. It complies earlier ECMA versions to ES5. Read more.
3. Nodemon: This is used during the development of a NodeJS based application by monitoring for any changes in the application and automatically restarting the server. Read more.

Let’s quickly install those:

npm install eslint babel-cli babel-core babel-preset-env nodemon --save-dev

Installed development dependencies

In our package.json, let’s add a line of code to enable nodemon watch and reset our application after every change. Do this underneath the script tag.

"start:dev": "nodemon app.js --exec babel-node"

Next, we will create a .babelrc file in our root folder to set up babel. Type the following code in your terminal.

// create a .babelrc
touch .babelrc
// set up babel
{
  "presets": ["env"]
}

Finally, we will configure eslint. You can see the details of doing so here.

// initialize eslint
./node_modules/.bin/eslint --init 

Eslint will request to understand your application before completing initialization. For this project, I selected the following:

Installed Eslint

./node_modules/.bin/eslint app.js

With the code above, Eslint will now look through our code identifying patterns with the aim of making our codes more consistent and avoiding bugs.

Eslint highlighting problems in our code

Our cleanup code…

If you got to this point, you’ve done awesomely well. Now, we can build on what we’ve done so far. Let’s wrap this up with a commit and push to our remote repository.

// show working tree status
git status
// add all files
git add .
// commit all files to local repository
git commit -m 'refactored our codes'
// push to github
git push origin develop

The next article will work you through developing CRUD operations for our application. For the third article, click here.