DEV Community: Toncho Dev

Basic Express Server with Node.js

Toncho Dev — Sat, 13 Jul 2019 16:28:50 +0000

Original post at toncho.dev

Express is a web application framework for Node.js that allows you to create APIs and web servers in a much easier and cleaner way. It is a lightweight package that does not obscure the core Node.js features.

Create Project

First, create a directory and then open it in the terminal

$ mkdir express-basic-server
$ cd express-basic-server

After that let's initializer the node project by running the command npm init and answer a few questions

$ npm init

that's going to create a new file called package.json with content very similar to

{
  "name": "express-basic-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now we will need to install express, that's very easy, install it via npm (node package manager) as you would with any other package

npm install express --save

that's going to update the file package.json with the express dependency and install it in the node_moudles folder

{
  "name": "express-basic-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.0"
  }
}

Create Server

Create an HTTP server is very easy in Express. First, we need to create a file where we will set up our server, the most common names are app.js and server.js but you can call as you want

$ touch server.js

The first line is to import the express package that we already installed, this will give us a module that is a function.

const express = require('express');

Then we need to create our app variable.

const app = express();

Note: You can create multiple apps this way, each with their requests and responses.

Now let's define the port that the server will be listening, it's a great idea to take that from the environment variables, so could be easily configurated and by default we will set it as 3000

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

At last, we must start our server! We are passing the port into the listen function. The function passed-in as the second optional parameter, and runs when the server starts up. This just gives us some feedback on the console to know that our application is running.

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

Now we have a basic server

const express = require('express');

const app = express();

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

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

To run the server let use the next command

$ node server.js

$ nodemon server.js

Note: If you would like to use nodemon you have to install it

The major difference between the node and nodemon command is that if you use node command you manually run the command each time after save but if you use nodemon command it detects the changes automatically in any file of the project.

You can install nodemon globally by running the command

$ npm install nodemon -g

Or you can install it as a dev dependency in the project and set a script to run the server with nodemon

$ npm install nodemon --save-dev

Now we have the package.json file like

{
  "name": "express-basic-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.0"
  },
  "devDependencies": {
    "nodemon": "^1.19.0"
  }
}

And we can run the server by running the command

$ npm run server

Basic Routing

The main responsibility of any server is how the application responds to the client request to specific endpoints like path by specific HTTP methods. In the server-side routing, each route has one route method, one route path, and one or more route handler functions.

Let's listen in our server to the path / by the HTTP method get and respond an <h1> HTML tag with Hello World!

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

Now our server.js file like looks like

const express = require('express');

const app = express();

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

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

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

There we have it, a basic Express server using Node.js. Now after running the server you can access to the http://localhost:3000 and see

You can find more info express

Javascript Object literal conditional properties

Toncho Dev — Mon, 08 Jul 2019 16:24:22 +0000

Original post at toncho.dev

We constantly coming up against adding conditional properties to an Object, but always end doing:

const a = {};
if (someCondition) {
  a.b = 5;
}

To deal with this in an elegant way we are going to use the spread operator and short-circuit evaluation, with the enhancements ES6 has brought to the Object.

const a = {
  ...someCondition && { b: 1 },
}

In JavaScript, expressions using the && and || operators get checked for possible short-circuit evaluation, && operator will only evaluate to true if both conditions are truthy. If the first one if falsey, then the second condition won’t even get evaluated. the || operator will only evaluate to false if both condition are falsey. If the first condition is truthy, the second won’t get evaluated. Additionally, the && and || operators actually return the value of the last expression that gets evaluated in the statement.

Now if someCondition is truthy will return { b: 1 } and false if someCondition is falsey, the returned value then gets spread into the object, so if the expression returns falsey will not be spread at all, and no new keys are added to the object.

Javascript Object Lookups

Toncho Dev — Thu, 13 Jun 2019 10:00:00 +0000

Original post at toncho.dev

We are going to see how object lookups can sometimes be used as a more maintainable alternative to if and switch statements.

Swtich

The switch statement evaluates an expression, matching the value to a case clause, and then executes statements associated. What switch does is take input and provide an output based on the case clause.

const type = 'apple';

let fruit;

switch(type) {
  case 'apple':
    fruit = 'Apple';
    break;
  case 'pear':
    fruit = 'Pear';
    break;
  default:
    fruit = 'Unknown fruit!';
    break;
}

console.log(fruit);
// expected output: "Apple"

There are many problems with switch statement, it has non standard way to handle code blocks, the rest of JavaScript uses curly braces but switch does not. We are forced to add break statements within each case, which can lead to difficult debugging, make mistakes when writing each case clause for often forget to add this break statement, also the number of case clause increases, the performance of the object gets better than the average cost of the switch where the order of the cases matter. The object approach is a hash table lookup, and the switch has to evaluate each case until it hits a match and a break.

If and Else

The if and else statements are similar to switch, but it evaluate a single value, if the specified condition is truthy the if statement executes otherwiese if the condition is falsy the else statements executes, when they are a lot of else if statements, something is really wrong and generally you should use something like switch as it’s more suited for the purpose and intention.

const getFruit = (type) => {
  if (type === 'apple') {
    type = 'Apple';
  } else if (type === 'pear') {
    type = 'Pear';
  } else {
    type = 'Unknown fruit!';
  }

  return type;
}

const type = 'apple';

console.log(getFruit(type));
// expected output: "Apple"

Object Lookups

We use Objects all the time, either as constructors or literals. We are going to get values from the Object properties.

const getFruit = (type) => {
  return {
    'apple': 'Apple',
    'pear': 'Pear',
  }[type];
}

const type = 'apple';

console.log(getFruit(type));
// expected output: "Apple"

This example is mapping one value to another one. with the object lookup we provide a cleaner way to write the code, we don't have to worry about case clause or break statement and it's easier to read and quickly understand what's going on.