DEV Community

Filipe Domingues
Filipe Domingues

Posted on

Learning Node.js building a simple Express API - Part I

#beginners #node #javascript

Hi dev.to! I've been learning Node.js on my free time and I thought this would be a good place to share my experience and maybe help some of you.

We will build a simple Todo REST API and along the way I'll try to cover some additional software development topics like unit testing, Authentication, continuous delivery / continuous integration, etc.

I will try to do everything step by step so you can all do it without much difficulty. This part will probably be a bit boring for those of you that already have some node.js or javascript experience.

Before we start hacking lets setup our development environment.

Environment

Lets starts with as little as we can and add things as we need it.

Node.Js

I'll be using the latest Node.Js version ( 8.2.1 ) if you don't have it already you can get it here.

IDE - Visual Studio Code

I'll be using Visual Studio code(VSCode) with some basic extensions but feel free to use the IDE you are most confortable with.
You can get VSCode here.

Project structure

I'll be adapting the project structure as we go but for now lets start really basic.
structure
As you can see nothing extraordinary here.
A docs directory so we can add any kind of documentation, a src directory where we'll put all our source code and finally our tests directory.

Lets get to the good stuff!

Ok, now that we have a nice setup lets get the show started.

npm

Npm is a javascript package manager. It comes with Node.js installation and we will use it to manager our project dependencies. You can find more information on npm here

Lets start by opening the command line on the root directory of the project and typing:


npm init
Enter fullscreen mode Exit fullscreen mode

It will ask you some questions, if you don't know what to answer just press enter for now. At the end you'll get a package.json file that will look something like this:

{
  "name": "fd-node-todo-api",
  "version": "1.0.0",
  "description": "expressjs todo API for dev.to",
  "main": "index.js",
  "directories": {
    "doc": "docs",
    "test": "tests"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

Eslint

We will use Eslint as our linting tool. Lets add our first development dependency to the project! On the command line type:

npm install eslint --save-dev
Enter fullscreen mode Exit fullscreen mode

Easy as that. When it finishes your package.json file will have our first dependency. It will look like this:

//...
"devDependencies": {
    "eslint": "^4.4.1"
  }
//...
Enter fullscreen mode Exit fullscreen mode

Now we can setup our linting rules. On the command line type:

eslint --init
Enter fullscreen mode Exit fullscreen mode

You can pick some popular style guide or configure it as you like. It will create a .eslintrc.js file with your rules. I'll post mine if you want to you it:

module.exports = {
    "env": {
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "no-console":0,
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};
Enter fullscreen mode Exit fullscreen mode

( yeah im a #2spaces and #allwaysUseSemiCollons programmer, don't hate me. )

If you are using VSCode i strongly recommend the Eslint extension. It integrates eslint into vscode perfectly and helps a lot with its auto fix on save option. If you need more help on this just let me know.

Express

Express is a web application framework for Node.js and we'll be using it to server our API.

Lets start by adding the dependency:

npm install express --save
Enter fullscreen mode Exit fullscreen mode

This will add Express to our dependencies on package.json file.

 "dependencies": {
    "express": "^4.15.4"
  }
Enter fullscreen mode Exit fullscreen mode

Notice that we've used --save and not --save-dev. This will add the dependency as a required dependency for our application to run, using --save-dev on the other hand will save it as development dependency only.

Lets create our entry point. Create a app.js file on our src directory and start importing our first dependency.

const express = require('express');
Enter fullscreen mode Exit fullscreen mode

Easy right? Now lets create our server and start it up:

const app = express();


app.listen(port,  function() {
  console.log(`Express server listening on port 3001`);
});
Enter fullscreen mode Exit fullscreen mode

You can add a variable to setup the connection port so you can easily change it and configure it.

In the end you should have something similar to this:

// Dependencies
const express = require('express');

// configs
const port = process.env.PORT ||  3001;

// ExpressJs Setup
const app = express();


// Starting up the server
app.listen(port,  function() {
  console.log(`Express server listening on port ${port}`);
});

module.exports = app;
Enter fullscreen mode Exit fullscreen mode

Now on our package.json file lets add our start script to get our server up and running. Add this to the scripts :

"scripts": {
    "start": "node src/app.js"
  }
Enter fullscreen mode Exit fullscreen mode

Lets try to run the script. On the command line type:

npm start
Enter fullscreen mode Exit fullscreen mode

If you see something like this

Express server listening on port 3001
Enter fullscreen mode Exit fullscreen mode

Good job!! you've made it! You've completed the 1st part of our journey!

If you want to check my solution for this part you can check it on my github @FilipeDominguesGit.

On the next part we will add our first routes and probably talk a bit about REST APIs in general.

Meanwhile you can help me decide what database you want to see on this project, MongoDb or PostgreSQL?

Hope you liked the 1st part! If you have any question or suggestion leave me a comment and i'll get back to you as soon as possible.

Top comments (7)

Collapse
 
sournyb profile image
Brahim Sourny • • Edited

Good article and tuts, very well explained.
Waiting for the next one and mongoDB.
Thanks.

Collapse
 
filipedomingues profile image
Filipe Domingues •

Hi and thanks for the feedback! Guess MongoDB is winning eheh :p

Collapse
 
vjekooo profile image
Vjeko Pavičin •

Mongo

Collapse
 
deaf_ayo profile image
Ayo Power-Atiko •

I've been learning Node.js as well so this is perfect! Thank you for doing this and sharing your knowledge.

I vote for MongoDB solely based on the fact I know nothing about PostgresSQL(yet!).

Collapse
 
filipedomingues profile image
Filipe Domingues •

Hi! :D Thanks a lot for the feedback! I'will try to start Part II as soon as possible.

Collapse
 
krookeduk profile image
Stuart Kennedy •

Awesome article! Just getting started with Node.js and would love to see an article covering continuous delivery / continuous integration.

Collapse
 
filipedomingues profile image
Filipe Domingues •

Thanks a lot for the feedback! I'll will do one for sure!

Working on part II of this article right now! ✏️😎

Read next

jacksonsantin profile image

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Jackson Dhanyel Santin -

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -

bikashdaga profile image

A Beginner’s Guide to Choosing the Right Machine Learning Model

Bikash Daga -

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -