Introduction

Welcome back to our introductory tutorial on Javascript ES8. Yesterday we had a crash course where we were introduced to many of the new modernized Javascript features. However, to really understand these new features and what they can mean for our day to day programming work, we need to actually see these features being used in a real life project. That is why it is time for us to build our apis. One will be in pure ES5 using Express.js and the other will be in pure ES8 using Koa.js. It is worth noting however that we will not be focusing on the differences between Koa and Express. This is not a framework shootout. These were chosen solely for their similarities and ability to mirror each other in many ways. Now, it's time to get started.

Project Requirements

To build these projects. You will need to make sure you have the following installed.

Getting Started

Now, let's open our terminal and begin scaffolding our project.

cd /your/project/directory/es5
touch package.json

Now let's quickly write out our package.json.

{
  "name": "es5",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "mongoose": "^4.12.4",
    "cors": "^2.8.4",
    "jsonwebtoken": "^7.4.1",
    "express-jwt": "^5.3.0",
    "mongoose-bcrypt": "^1.5.0",
    "mongoose-relationship": "^0.1.5",
    "mongoose-unique-validator": "^1.0.5",
    "oauth2orize": "^1.10.0",
    "passport-oauth2-client-password": "^0.1.2",
    "bcrypt-nodejs": "^0.0.3",
    "passport": "^0.4.0"
  }
}

Good, now let's get back to our terminal.

mkdir controller services model
touch config.js

Now let's write our config.js file.

module.exports = {
  mongoUrl: 'your-mongo-here',
  secret: 'my-secret',
  client: {
    clientId: 'my-awesome-clientid',
    clientSecret: 'my-awesome-clientSecret'
  }
}

If you plan to actually run this api, then make sure to fill in the mongoUrl with the url to your particular Mongo database. Now, back to the terminal.

cd controllers
touch task.js user.js
cd ..
touch model/Model.js
cd services
touch clientAuth.js oauth.js utility.js
cd ..
npm install

Good, now we have our es5 project scaffolded. Time to do the same with our es8 project.

cd ../es8
touch package.json

Now let's write our package.json.

{
  "name": "es8",
  "version": "1.0.0",
  "description": "es8-demo",
  "main": "app.js",
  "author": "your name here",
  "license": "MIT",
  "scripts": {
    "test": "standard",
    "start": "nodemon app.js"
  },
  "dependencies": {
    "bcrypt-nodejs": "^0.0.3",
    "bluebird": "^3.5.0",
    "jsonwebtoken": "^7.4.1",
    "kcors": "^2.2.1",
    "koa": "^2.3.0",
    "koa-bodyparser": "^4.2.0",
    "koa-convert": "^1.2.0",
    "koa-jwt": "^3.2.2",
    "koa-passport": "^3.0.0",
    "koa-res": "^1.3.0",
    "koa-simple-router": "^0.2.0",
    "mongoose": "^4.11.3",
    "mongoose-bcrypt": "^1.5.0",
    "mongoose-relationship": "^0.1.5",
    "mongoose-unique-validator": "^1.0.5",
    "oauth2orize-koa": "^1.3.2",
    "passport-oauth2-client-password": "^0.1.2"
  },
  "devDependencies": {}
}

Good, now back to the terminal.

mkdir controller model services
touch config.js

Now let's write our config.js file.

module.exports = {
  mongoUrl: 'your-mongo-here',
  secret: 'my-secret',
  client: {
    clientId: 'my-awesome-clientid',
    clientSecret: 'my-awesome-clientSecret'
  }
}

Just like before, if you plan on running the api for real then fill in mongoUrl with your Mongo database url. Now, back to the terminal.

cd controllers
touch task.js user.js
cd ..
touch model/Model.js
cd services
touch clientAuth.js oauth.js utility.js
cd ..
npm install

Summary

So unfortunately we didn't get to do any serious coding today. However, be ready because tomorrow we will be writing a large amount of code in a relatively short time. First we will write our standard ES5 project then once that is complete we will transition to writing our ES8 project so you can truly see the differences between the two.

Franzé Jr

Software Engineer with experience working in multi-cultural teams, Franze wants to help people when he can, and he is passionate about programming and Computer Science. Founder of RemoteMeetup.com where he can meet people all over the World. When Franze is not coding, he is studying something about programming.

  1. Comments for Start building an API in ES5 and ES8

You must login to comment

You May Also Like