Explore topic-wise InterviewSolutions in .

Web applications NEED to provide the functionality to allow file uploads. Let us see how we can receive files from the clients and store them on our server.

We have already used the koa-body middleware for parsing requests. This middleware is also used for handling file uploads. Let us create a form that allows us to upload files and then save these files using koa. First create a template called file_upload.pug with the following contents:

html
head
title File uploads
body
form(ACTION="/upload" method="POST" enctype="multipart/form-data")
div
input(type="TEXT" name="name" placeholder="Name")
div
input(type="file" name="image")
div
input(type="submit")

Web applications need to provide the functionality to allow file uploads. Let us see how we can receive files from the clients and store them on our server.

We have already used the koa-body middleware for parsing requests. This middleware is also used for handling file uploads. Let us create a form that allows us to upload files and then save these files using koa. First create a template called file_upload.pug with the following contents:

html
head
title File uploads
body
form(action="/upload" method="POST" enctype="multipart/form-data")
div
input(type="text" name="name" placeholder="Name")
div
input(type="file" name="image")
div
input(type="submit")

Forms are an INTERGRAL part of the web. ALMOST every website we VISIT offers us forms that submit or fetch some information for us. To get started with forms, we will first install the koa-body To install this, go to your terminal and use:

$ npm install --save koa-body
Replace your APP.js file contents with the following code:
var koa = REQUIRE('koa');
var router = require('koa-router');
var bodyParser = require('koa-body');
var app = koa();
//Set up Pug
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
//Set up body parsing middleware
app.use(bodyParser({
formidable:{uploadDir: './uploads'},
multipart: true,
urlencoded: true
}));
_.get('/', renderForm);
_.post('/', handleForm);
function * renderForm(){
this.render('form');
}
function *handleForm(){
console.log(this.request.body);
console.log(this.req.body);
this.body = this.request.body; //This is where the parsed request is stored
}
app.use(_.routes()); 
app.listen(3000);

Forms are an intergral part of the web. Almost every website we visit offers us forms that submit or fetch some information for us. To get started with forms, we will first install the koa-body To install this, go to your terminal and use:

$ npm install --save koa-body
Replace your app.js file contents with the following code:
var koa = require('koa');
var router = require('koa-router');
var bodyParser = require('koa-body');
var app = koa();
//Set up Pug
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
//Set up body parsing middleware
app.use(bodyParser({
formidable:{uploadDir: './uploads'},
multipart: true,
urlencoded: true
}));
_.get('/', renderForm);
_.post('/', handleForm);
function * renderForm(){
this.render('form');
}
function *handleForm(){
console.log(this.request.body);
console.log(this.req.body);
this.body = this.request.body; //This is where the parsed request is stored
}
app.use(_.routes()); 
app.listen(3000);

Pug provides a very intuitive way to create components for a web page. For example, if you see a news website, the header with logo and categories is always fixed. Instead of copying that to evey view we create we can use an include. Following example shows how we can use an include:

Create 3 views with the following code:

HEADER.PUG

div.header.

I'm the header for this website.

CONTENT.PUG

html
head
title Simple template
body
include ./header.pug
h3 I'm the main content
include ./footer.pug

FOOTER.PUG

div.footer.

I'm the footer for this website.

Create a route for this as follows:

var koa = REQUIRE('koa');
var ROUTER = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
var _ = router(); //INSTANTIATE the router
_.get('/components', getComponents);
function *getComponents(){
this.render('content.pug');
}
app.use(_.routes()); //Use the routes DEFINED using the router
app.listen(3000);

Pug provides a very intuitive way to create components for a web page. For example, if you see a news website, the header with logo and categories is always fixed. Instead of copying that to evey view we create we can use an include. Following example shows how we can use an include:

Create 3 views with the following code:

HEADER.PUG

div.header.

I'm the header for this website.

CONTENT.PUG

html
head
title Simple template
body
include ./header.pug
h3 I'm the main content
include ./footer.pug

FOOTER.PUG

div.footer.

I'm the footer for this website.

Create a route for this as follows:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
var _ = router(); //Instantiate the router
_.get('/components', getComponents);
function *getComponents(){
this.render('content.pug');
}
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

When we render a PUG template, we can actually PASS it a value from our route HANDLER, which we can then use in our template. Create a new route handler with the following:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app // equals to pug.use(app) and app.use(pug.middleware)
});
var _ = router(); //Instantiate the router
_.get('//dynamic_view', dynamicMessage); // Define routes
function *dynamicMessage(){
this.render('dynamic', {
NAME: "TutorialsPoint", 
url:"https://www.tutorialspoint.com"
});
};
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

When we render a pug template, we can actually pass it a value from our route handler, which we can then use in our template. Create a new route handler with the following:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app // equals to pug.use(app) and app.use(pug.middleware)
});
var _ = router(); //Instantiate the router
_.get('//dynamic_view', dynamicMessage); // Define routes
function *dynamicMessage(){
this.render('dynamic', {
name: "TutorialsPoint", 
url:"https://www.tutorialspoint.com"
});
};
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

To DEFINE attributes, we use a comma seperated list of attributes, in PARANTHESIS. Class and ID attributes have special representations. The following line of code covers defining attributes, classes and id for a given HTML tag.

div.container.COLUMN.main#DIVISION(width="100",height="100")

This line of code, get converted to:

<div class="container column main" id="division" width="100" height="100"></div>

To define attributes, we use a comma seperated list of attributes, in paranthesis. Class and ID attributes have special representations. The following line of code covers defining attributes, classes and id for a given html tag.

div.container.column.main#division(width="100",height="100")

This line of code, get converted to:

<div class="container column main" id="division" width="100" height="100"></div>

Pug is a templating engine. Templating engines are used to remove the cluttering of our server CODE with HTML, concatenating strings wildly to existing HTML templates. Pug is a very POWERFUL templating engine which has a variety of features including filters, includes, inheritance, interpolation, etc. There is a lot of ground to cover on this.

To USE Pug with koa, we need to install it,

$ npm install --save pug koa-pug
Now that pug is installed, set it as the templating engine for your app. Add the following code to your app.js file.
var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
var _ = router(); //Instantiate the router
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

Now create a new directory called views. Inside that create a file called first_view.pug, and enter the following data in it.

doctype html
html
HEAD
title="Hello Pug"
body
p.greetings#people Hello Views!
To run this page, add the following ROUTE to your app:
_.get('/hello', getMessage); // Define routes
function *getMessage(){
this.render('first_view');
};

Pug is a templating engine. Templating engines are used to remove the cluttering of our server code with HTML, concatenating strings wildly to existing HTML templates. Pug is a very powerful templating engine which has a variety of features including filters, includes, inheritance, interpolation, etc. There is a lot of ground to cover on this.

To use Pug with koa, we need to install it,

$ npm install --save pug koa-pug
Now that pug is installed, set it as the templating engine for your app. Add the following code to your app.js file.
var koa = require('koa');
var router = require('koa-router');
var app = koa();
var Pug = require('koa-pug');
var pug = new Pug({
viewPath: './views',
basedir: './views',
app: app //Equivalent to app.use(pug)
});
var _ = router(); //Instantiate the router
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

Now create a new directory called views. Inside that create a file called first_view.pug, and enter the following data in it.

doctype html
html
head
title="Hello Pug"
body
p.greetings#people Hello Views!
To run this page, add the following route to your app:
_.get('/hello', getMessage); // Define routes
function *getMessage(){
this.render('first_view');
};

A list of Third party middleware for EXPRESS is available here. FOLLOWING are some of the most COMMONLY USED middlewares:

• koa-bodyparser
• koa-router
• koa-static
• koa-compress

A list of Third party middleware for express is available here. Following are some of the most commonly used middlewares:

One of the most important things about middleware in KOA is that the order in which they are written/included in your file, are the order in which they are executed DOWNSTREAM. As SOON as we hit a yield statement in a middleware, it switches to the next middleware in line till we reach the last. Then again we start moving BACK up and resuming functions from yield statements.

For example, in the following code snippet, the first FUNCTION executes first till yield, then the second middleware till yield, then the third. As we have no more middlewares here, we start moving back up, executing in reverse order, ie, third, second, first.

One of the most important things about middleware in koa is that the order in which they are written/included in your file, are the order in which they are executed downstream. As soon as we hit a yield statement in a middleware, it switches to the next middleware in line till we reach the last. Then again we start moving back up and resuming functions from yield statements.

For example, in the following code snippet, the first function executes first till yield, then the second middleware till yield, then the third. As we have no more middlewares here, we start moving back up, executing in reverse order, ie, third, second, first.

Middleware functions are functions that have access to the context object and the NEXT middleware function in the APPLICATION’s REQUEST-response cycle. These functions are used to modify request and response objects for tasks like parsing request bodies, adding response HEADERS, etc. Koa goes a step further by yielding 'downstream', then flowing control back 'upstream'. This EFFECT is called cascading.

Middleware functions are functions that have access to the context object and the next middleware function in the application’s request-response cycle. These functions are used to modify request and response objects for tasks like parsing request bodies, adding response headers, etc. Koa goes a step further by yielding 'downstream', then flowing control back 'upstream'. This effect is called cascading.

ERROR handling plays an important PART in building WEB APPLICATIONS. Koa uses middlewares for this purpose as well.

In koa you add a middleware that does try { yield next } as one of the first middleware. If we encounter any error downstream, we return to the associated CATCH clause and handle the error here.

Error handling plays an important part in building web applications. Koa uses middlewares for this purpose as well.

In koa you add a middleware that does try { yield next } as one of the first middleware. If we encounter any error downstream, we return to the associated catch clause and handle the error here.

Redirection is very important when creating websites. If a malformed URL is requested or there are some errors on your server, you should redirect them to the respective ERROR pages. Redirects can also be used to keep people out of restricted areas of your website. Let us create an error page and redirect to that page whenever someone requests a malformed URL:

VAR koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/not_found', printErrorMessage);
_.get('/hello', printHelloMessage);
app.use(_.routes());
app.use(handle404Errors);
function *printErrorMessage(){
this.status = 404;
this.body = "Sorry we do not have this resource.";
}
function *printHelloMessage(){
this.status = 200;
this.body = "Hey there!";
}
function *handle404Errors(next){
if (404 != this.status) return;
this.redirect('/not_found');
}
app.listen(3000);

When we run this code and navigate to any route other than /hello, we'll be REDIRECTED to /not_found. We have placed the middleware at the end(app.use function CALL to this middleware). This ensures we reach the middleware at last and send the corresponding response.

Redirection is very important when creating websites. If a malformed URL is requested or there are some errors on your server, you should redirect them to the respective error pages. Redirects can also be used to keep people out of restricted areas of your website. Let us create an error page and redirect to that page whenever someone requests a malformed URL:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/not_found', printErrorMessage);
_.get('/hello', printHelloMessage);
app.use(_.routes());
app.use(handle404Errors);
function *printErrorMessage(){
this.status = 404;
this.body = "Sorry we do not have this resource.";
}
function *printHelloMessage(){
this.status = 200;
this.body = "Hey there!";
}
function *handle404Errors(next){
if (404 != this.status) return;
this.redirect('/not_found');
}
app.listen(3000);

When we run this code and navigate to any route other than /hello, we'll be redirected to /not_found. We have placed the middleware at the end(app.use function call to this middleware). This ensures we reach the middleware at last and send the corresponding response.

A Koa Response object is an abstraction on top of node's vanilla response object, providing additional functionality that is useful for every day HTTP server development. The Koa response object is embeded in the context object, this. Lets log out the response object WHENEVER we GET a REQUEST:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/hello', getMessage);
function *getMessage(){
this.body = 'Your request has been logged.';
console.log(this.response);
}
app.use(_.routes());
app.listen(3000);

A Koa Response object is an abstraction on top of node's vanilla response object, providing additional functionality that is useful for every day HTTP server development. The Koa response object is embeded in the context object, this. Lets log out the response object whenever we get a request:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/hello', getMessage);
function *getMessage(){
this.body = 'Your request has been logged.';
console.log(this.response);
}
app.use(_.routes());
app.listen(3000);

A Koa REQUEST object is an abstraction on top of NODE's vanilla request object, providing additional functionality that is useful for every day HTTP server development. The Koa request object is embeded in the context object, this. Lets log out the request object whenever we get a request:

VAR koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/hello', getMessage);
function *getMessage(){
console.log(this.request);
this.body = 'Your request has been logged.';
}
app.use(_.routes());
app.listen(3000);

A Koa Request object is an abstraction on top of node's vanilla request object, providing additional functionality that is useful for every day HTTP server development. The Koa request object is embeded in the context object, this. Lets log out the request object whenever we get a request:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/hello', getMessage);
function *getMessage(){
console.log(this.request);
this.body = 'Your request has been logged.';
}
app.use(_.routes());
app.listen(3000);

The HTTP method is SUPPLIED in the request and specifies the operation that the client has requested. The below table SUMMARIZES the most used HTTP methods:

• GET: The GET method requests a representation of the specified RESOURCE. Requests using GET should only retrieve data and should have no other effect.
• POST: The POST method requests that the server accept the data enclosed in the request as a new object/entity of the resource identified by the URI.
• PUT: The PUT method requests that the server accept the data enclosed in the request as a modification to existing object identified by the URI. If it does not exist then PUT method should create one.
• DELETE: The DELETE method requests that the server delete the specified resource.

These are the most common HTTP methods.

The HTTP method is supplied in the request and specifies the operation that the client has requested. The below table summarizes the most used HTTP methods:

These are the most common HTTP methods.

You can also use REGEX to restrict URL parameter matching. LET's say you need the id to be 5 digits long number. You can use the following ROUTE definition:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/things/:id([0-9]{5})', sendID);
function *sendID(){
this.body = 'id: ' + this.params.id;
}
app.use(_.routes());
app.listen(3000);

Note that this will only match the requests that have a 5 digit long id. You can use more complex regexes to match/validate your routes. If NONE of your routes match the request, you'll get a Not found message as response.

You can also use regex to restrict URL parameter matching. Let's say you need the id to be 5 digits long number. You can use the following route definition:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/things/:id([0-9]{5})', sendID);
function *sendID(){
this.body = 'id: ' + this.params.id;
}
app.use(_.routes());
app.listen(3000);

Note that this will only match the requests that have a 5 digit long id. You can use more complex regexes to match/validate your routes. If none of your routes match the request, you'll get a Not found message as response.

We can now DEFINE routes, but those are static or fixed. To use DYNAMIC routes, we need to provide different TYPES of routes. Using dynamic routes allows US to pass parameters and process based on them. Here is an example of a dynamic route:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.GET('/:id', sendID);
function *sendID(){
this.body = 'The id you specified is ' + this.params.id;
}
app.use(_.routes());
app.listen(3000);

We can now define routes, but those are static or fixed. To use dynamic routes, we need to provide different types of routes. Using dynamic routes allows us to pass parameters and process based on them. Here is an example of a dynamic route:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router();
_.get('/:id', sendID);
function *sendID(){
this.body = 'The id you specified is ' + this.params.id;
}
app.use(_.routes());
app.listen(3000);

Web frameworks PROVIDE resources such as HTML pages, scripts, images, etc. at different routes. Koa does not support routes in the core module. We need to use the koa-router module to easily create routes in koa. Install this module using:

NPM install --save koa-router

Now that we have koa-router installed, lets look at a simple GET route example:

VAR koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router(); //Instantiate the router
_.get('/hello', getMessage); // Define routes
function *getMessage(){
this.body = "Hello WORLD!";
};
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

If we run our application and go to localhost:3000/hello, the server receives a get request at route "/hello", our koa app executes the callback function attached to this route and sends "Hello World!" as the RESPONSE.

Web frameworks provide resources such as HTML pages, scripts, images, etc. at different routes. Koa does not support routes in the core module. We need to use the koa-router module to easily create routes in koa. Install this module using:

npm install --save koa-router

Now that we have koa-router installed, lets look at a simple GET route example:

var koa = require('koa');
var router = require('koa-router');
var app = koa();
var _ = router(); //Instantiate the router
_.get('/hello', getMessage); // Define routes
function *getMessage(){
this.body = "Hello world!";
};
app.use(_.routes()); //Use the routes defined using the router
app.listen(3000);

If we run our application and go to localhost:3000/hello, the server receives a get request at route "/hello", our koa app executes the callback function attached to this route and sends "Hello World!" as the response.

One of the most exciting new features coming in JavaScript ES6 is a new breed of function, called a generator. Before generators, the whole script used to usually execute in a top to bottom order, without an easy way to stop code execution and resuming with the same stack LATER. Generators are functions which can be EXITED and later re-entered. Their context (variable BINDINGS) will be saved ACROSS re-entrances.

Generators allow us to stop code execution in between. So LETS have a look at a simple generator:

var generator_func = function* (){
yield 1;
yield 2;
};
var itr = generator_func();
console.log(itr.next());
console.log(itr.next());
console.log(itr.next());

One of the most exciting new features coming in JavaScript ES6 is a new breed of function, called a generator. Before generators, the whole script used to usually execute in a top to bottom order, without an easy way to stop code execution and resuming with the same stack later. Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

Generators allow us to stop code execution in between. So lets have a look at a simple generator:

var generator_func = function* (){
yield 1;
yield 2;
};
var itr = generator_func();
console.log(itr.next());
console.log(itr.next());
console.log(itr.next());

There are 2 ways to install a package using NPM: globally and locally.

• Globally: This method is generally USED to install development tools and CLI based packages. To install a package globally, use:
  $ npm install -G <package-name>
• Locally: This method is generally used to install frameworks and libraries. A locally installed package can be used only within the directory it is installed. To install a package locally use the same command as above without the -g flag.
  $ npm install <package-name>

Whenever we create a project using npm, we need to provide a package.json file, which has all the DETAILS about our project. npm make it easy for us to set up this file. Let us set up our development project.

1. Fire up your terminal/cmd, create a new folder named hello-world and cd into it: npm into it
2. Now to create the package.json file using npm, use the following.--npm init
3. Now we have our package.json file set up, we’ll install koa. To install koa and add it in our package.json file, we use the following command:
   $ npm install --save koa
   
   To confirm koa installed correctly, run
   
   $ ls node_modules #(dir node_modules for windows)

There are 2 ways to install a package using npm: globally and locally.

Whenever we create a project using npm, we need to provide a package.json file, which has all the details about our project. npm make it easy for us to set up this file. Let us set up our development project.

npm is the package MANAGER for NODE. The npm Registry is a public collection of packages of open-source code for Node.js, front-end WEB APPS, mobile apps, robots, routers, and countless other needs of the JavaScript community. npm allows us to access all these packages and install them locally. You can browse through the list of packages available on npm at npmJS.

npm is the package manager for node. The npm Registry is a public collection of packages of open-source code for Node.js, front-end web apps, mobile apps, robots, routers, and countless other needs of the JavaScript community. npm allows us to access all these packages and install them locally. You can browse through the list of packages available on npm at npmJS.

To get started with developing using the Koa framework, you need to have Node and npm(node package MANAGER) installed. If you don’t already have these, HEAD over to Node setup to install node on your local SYSTEM. Confirm that node and npm are installed by running the following commands in your terminal.

$ node --version
$ npm --version

You should get an output similar to:

v5.0.0
3.5.2

Please ensure your node version is above 6.5.0.

Now that we have Node and npm set up, LET us understand what npm is and how to USE it.

To get started with developing using the Koa framework, you need to have Node and npm(node package manager) installed. If you don’t already have these, head over to Node setup to install node on your local system. Confirm that node and npm are installed by running the following commands in your terminal.

$ node --version
$ npm --version

You should get an output similar to:

v5.0.0
3.5.2

Please ensure your node version is above 6.5.0.

Now that we have Node and npm set up, let us understand what npm is and how to use it.

MONGODB is an open-source, DOCUMENT database designed for ease of DEVELOPMENT and scaling. We'll use this database to STORE data.

Mongoose is a client API for node.js which makes it easy to access our database from our koa application.

MongoDB is an open-source, document database designed for ease of development and scaling. We'll use this database to store data.

Mongoose is a client API for node.js which makes it easy to access our database from our koa application.

Pug(EARLIER known as Jade) is a terse language for writing HTML templates. It:

• Produces HTML
• SUPPORTS dynamic code
• Supports reusability (DRY)
• It is one of the most popular templating language used with koa.

Pug(earlier known as Jade) is a terse language for writing HTML templates. It:

KOA has a small footprint(600 LoC) and is a very thin layer of abstraction over node to create server side APPS. It is fully pluggable and has a HUGE COMMUNITY. This also allows us to easily extend koa and use it according to our needs. It is built using the bleeging EDGE technology(ES6) which gives it an edge over older frameworks like express.

Koa has a small footprint(600 LoC) and is a very thin layer of abstraction over node to create server side apps. It is fully pluggable and has a huge community. This also allows us to easily extend koa and use it according to our needs. It is built using the bleeging edge technology(ES6) which gives it an edge over older frameworks like express.

KOA provides a minimal interface to us to build our applications. It is a very small framework(600 LoC) which provides us the required tools to build our app and is quite flexible, there are numerous modules available on npm for Koa, which can be directly plugged into it. Koa can be thought of as the core of express.js without all the BELLS and WHISTLES.

Koa provides a minimal interface to us to build our applications. It is a very small framework(600 LoC) which provides us the required tools to build our app and is quite flexible, there are numerous modules available on npm for Koa, which can be directly plugged into it. Koa can be thought of as the core of express.js without all the bells and whistles.