Category: koajs

Koa.js – Redirects ”; Previous Next 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. Following are the results we see when we run the above code. When we navigate to https://localhost:3000/hello, we get − If we navigate to any other route, we get − Print Page Previous Next Advertisements ”;

Koa.js – Useful Resources ”; Previous Next The following resources contain additional information on Koa.js. Please use them to get more in-depth knowledge on this. Useful Video Courses Full Stack Development With Vue JS 2 And Spring Boot 54 Lectures 3.5 hours Senol Atac More Detail Node js for Course for beginners + Game project 27 Lectures 2.5 hours Laurence Svekis More Detail Advanced Theoretical JavaScript: Learn Advanced JS Concepts 25 Lectures 2 hours Mehul Mohan More Detail ReactJS Course : Learn React JS From Scratch Best Seller 61 Lectures 4.5 hours Skillbakery More Detail JavaScript Deep Dive: Explore JS (For Beginners-to-Advanced) 129 Lectures 5.5 hours TELCOMA Global More Detail React JS and .NET Core Web API Full Stack Master Course 21 Lectures 3.5 hours Vinay Kumar More Detail Print Page Previous Next Advertisements ”;

Discuss Koa.js ”; Previous Next Koa.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is an open source framework developed and maintained by the creators of Express.js, the most popular node web framework. Print Page Previous Next Advertisements ”;

Koa.js – Caching ”; Previous Next Caching is the term for storing reusable responses in order to make subsequent requests faster. Every browser ships with an implementation of a HTTP cache. All we have to do is ensure that each server response provides correct HTTP header directives to instruct the browser on when and for how long the response can be cached by the browser. Following are some benefits of including caching in your web apps − Your network costs decrease. If your content is cached, you”ll need to send less of it for every subsequent request. Speed and performance of your website increases. Your content can be made available even if your client is offline. We”ll be using the koa-static-cache middleware to implement caching in our app. Install these middleware using − $ npm install –save koa-static-cache Go to your app.js file and add the following code to it. var koa = require(”koa”); var app = koa(); var path = require(”path”); var staticCache = require(”koa-static-cache”); app.use(staticCache(path.join(__dirname, ”public”), { maxAge: 365 * 24 * 60 * 60 //Add these files to caches for a year })) app.listen(3000); The koa-static-cache middleware is used to cache server responses on the client side. The cache-control header is set according to the options we provide while initializing the cache object. We have set the expiration time of this cached response to 1 year. Following are the comparisons of request we have sent before and after the file was cached. Before this file was cached, the returned status code was 200, which is OK. The response headers had multiple information regarding the content to be cached and had also given an ETag for the content. The next time the request was sent, it was sent along with the ETtag. Since our content hadn”t changed on the server, its corresponding ETag also remained the same and the client was told that the copy it has locally is up-to-date with what the server would provide and should use the local one instead of requesting again. Note − For invalidating any cached file, you just need to change its file name and update its reference. This will ensure that you have a new file to send to the client and the client can’t load it back from the cache. Print Page Previous Next Advertisements ”;

Koa.js – RESTful APIs ”; Previous Next To create mobile applications, single page applications, use AJAX calls and provide data to clients, you”ll need an API. A popular architectural style of how to structure and name these APIs and the endpoints is called REST(Representational Transfer State). HTTP 1.1 was designed keeping REST principles in mind. REST was introduced by Roy Fielding in 2000 in his paper Fielding Dissertations. RESTful URIs and methods provide us with almost all information we need to process a request. The following table summarizes how the various verbs should be used and how URIs should be named. We”ll be creating a movies API towards the end, so let’s discuss how it”ll be structured. Method URI Details Function GET /movies Safe, cachable Gets the list of all movies and their details GET /movies/1234 Safe, cachable Gets the details of Movie id 1234 POST /movies N/A Creates a new movie with details provided. Response contains the URI for this newly created resource. PUT /movies/1234 Idempotent Modifies movie id 1234 (creates one if it doesn”t already exist). Response contains the URI for this newly created resource. DELETE /movies/1234 Idempotent Movie id 1234 should be deleted, if it exists. Response should contain the status of request. DELETE or PUT /movies Invalid Should be invalid. DELETE and PUT should specify which resource they are working on. Now let’s create this API in Koa. We will be using JSON as our transport data format as it is easy to work with in JavaScript and has loads of other benefits. Replace your index.js file with the following − INDEX.JS var koa = require(”koa”); var router = require(”koa-router”); var bodyParser = require(”koa-body”); var app = koa(); //Set up body parsing middleware app.use(bodyParser({ formidable:{uploadDir: ”./uploads”}, multipart: true, urlencoded: true })); //Require the Router we defined in movies.js var movies = require(”./movies.js”); //Use the Router on the sub route /movies app.use(movies.routes()); app.listen(3000); Now that we have our application set up, let us concentrate on creating the API. First set up the movies.js file. We are not using a database to store the movies but are storing them in memory, so every time the server restarts the movies added by us will vanish. This can easily be mimicked using a database or a file (using node fs module). Import koa-router, create a Router and export it using module.exports. var Router = require(”koa-router”); var router = Router({ prefix: ”/movies” }); //Prefixed all routes with /movies var movies = [ {id: 101, name: “Fight Club”, year: 1999, rating: 8.1}, {id: 102, name: “Inception”, year: 2010, rating: 8.7}, {id: 103, name: “The Dark Knight”, year: 2008, rating: 9}, {id: 104, name: “12 Angry Men”, year: 1957, rating: 8.9} ]; //Routes will go here module.exports = router; GET Routes Define the GET route for getting all the movies. router.get(”/”, sendMovies); function *sendMovies(next){ this.body = movies; yield next; } That”s it. To test out if this is working fine, run your app, then open your terminal and enter − curl -i -H “Accept: application/json” -H “Content-Type: application/json” -X GET localhost:3000/movies You”ll get the following response − [{“id”:101,”name”:”Fight Club”,”year”:1999,”rating”:8.1},{“id”:102,”name”:”Inception”,”year”:2010,”rating”:8.7}, {“id”:103,”name”:”The Dark Knight”,”year”:2008,”rating”:9},{“id”:104,”name”:”12 Angry Men”,”year”:1957,”rating”:8.9}] We have a route to get all the movies. Now let’s create a route to get a specific movie by its id. router.get(”/:id([0-9]{3,})”, sendMovieWithId); function *sendMovieWithId(next){ var ctx = this; var currMovie = movies.filter(function(movie){ if(movie.id == ctx.params.id){ return true; } }); if(currMovie.length == 1){ this.body = currMovie[0]; } else { this.response.status = 404;//Set status to 404 as movie was not found this.body = {message: “Not Found”}; } yield next; } This will get us the movies according to the id that we provide. To test this out, use the following command in your terminal. curl -i -H “Accept: application/json” -H “Content-Type: application/json” -X GET localhost:3000/movies/101 You”ll get the response as − {“id”:101,”name”:”Fight Club”,”year”:1999,”rating”:8.1} If you visit an invalid route, it”ll produce a cannot GET error, while if you visit a valid route with an id that doesn’t exist, it”ll produce a 404 error. We are done with the GET routes. Now, let’s move on to POST route. POST Route Use the following route to handle the POSTed data. router.post(”/”, addNewMovie); function *addNewMovie(next){ //Check if all fields are provided and are valid: if(!this.request.body.name || !this.request.body.year.toString().match(/^[0-9]{4}$/g) || !this.request.body.rating.toString().match(/^[0-9].[0-9]$/g)){ this.response.status = 400; this.body = {message: “Bad Request”}; } else { var newId = movies[movies.length-1].id+1; movies.push({ id: newId, name: this.request.body.name, year: this.request.body.year, rating: this.request.body.rating }); this.body = {message: “New movie created.”, location: “/movies/” + newId}; } yield next; } This will create a new movie and store it in the movies variable. To test this route out, enter the following in your terminal − curl -X POST –data “name = Toy%20story&year = 1995&rating = 8.5″ https://localhost:3000/movies You”ll get the following response − {“message”:”New movie created.”,”location”:”/movies/105″} To test if this was added to the movies object, run the get request for /movies/105 again. You”ll get the following response − {“id”:105,”name”:”Toy story”,”year”:”1995″,”rating”:”8.5″} Let’s move on to create the PUT and DELETE routes. PUT Route The PUT route is almost exactly the same as the POST route. We will be specifying the id for the object that”ll be updated/created. Create the route in the following way − router.put(”/:id”, updateMovieWithId); function *updateMovieWithId(next){ //Check if all fields are provided and are valid: if(!this.request.body.name || !this.request.body.year.toString().match(/^[0-9]{4}$/g) || !this.request.body.rating.toString().match(/^[0-9].[0-9]$/g) || !this.params.id.toString().match(/^[0-9]{3,}$/g)){ this.response.status = 400; this.body = {message: “Bad Request”}; } else { //Gets us the index of movie with given id. var updateIndex = movies.map(function(movie){ return movie.id; }).indexOf(parseInt(this.params.id)); if(updateIndex === -1){ //Movie not found, create new movies.push({ id: this.params.id, name: this.request.body.name, year: this.request.body.year, rating: this.request.body.rating }); this.body = {message: “New movie created.”, location: “/movies/” + this.params.id}; } else { //Update existing movie movies[updateIndex] = { id: this.params.id, name: this.request.body.name, year: this.request.body.year, rating: this.request.body.rating }; this.body = {message: “Movie id ” + this.params.id + ” updated.”, location: “/movies/” + this.params.id}; } } } This route will do the function we specified in the table above. It”ll update the object with new details if it exists. If it

Koa.js – Cookies ”; Previous Next Cookies are simple, small files/data that are sent to client with a server request and stored on the client side. Every time the user loads the website back, this cookie is sent with the request. This helps keep track of the users actions. There are numerous uses of HTTP Cookies. Session management Personalization(Recommendation systems) User tracking To use cookies with Koa, we have the functions: ctx.cookies.set() and ctx.cookies.get(). To set a new cookie, let’s define a new route in our Koa app. var koa = require(”koa”); var router = require(”koa-router”); var app = koa(); _.get(”/”, setACookie); function *setACookie() { this.cookies.set(”foo”, ”bar”, {httpOnly: false}); } var _ = router(); app.use(_.routes()); app.listen(3000); To check if the cookie is set or not, just go to your browser, fire up the console, and enter − console.log(document.cookie); This will produce the following output (you may have more cookies set maybe due to extensions in your browser). “foo = bar” Here is an example of the above. The browser also sends back cookies every time it queries the server. To view a cookie on your server, on the server console in a route, add the following code to that route. console.log(”Cookies: foo = ”, this.cookies.get(”foo”)); Next time you send a request to this route, you”ll get the following output. Cookies: foo = bar Adding Cookies with Expiration Time You can add cookies that expire. To add a cookie that expires, just pass an object with the property ”expires” set to the time when you want it to expire. For example, var koa = require(”koa”); var router = require(”koa-router”); var app = koa(); _.get(”/”, setACookie); function *setACookie(){ //Expires after 360000 ms from the time it is set. this.cookies.set(”name”, ”value”, { httpOnly: false, expires: 360000 + Date.now() }); } var _ = router(); app.use(_.routes()); app.listen(3000); Deleting Existing Cookies To unset a cookie, simply set the cookie to an empty string. For example, if you need to clear a cookie named foo, use the following code. var koa = require(”koa”); var router = require(”koa-router”); var app = koa(); _.get(”/”, setACookie); function *setACookie(){ //Expires after 360000 ms from the time it is set. this.cookies.set(”name”, ””); } var _ = router(); app.use(_.routes()); app.listen(3000); This will unset the said cookie. Note that you should leave the HttpOnly option to be true when not using the cookie in the client side code. Print Page Previous Next Advertisements ”;

Koa.js – Templating ”; Previous Next 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 such as 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 using the following command. $ npm install –save pug koa-pug Once 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 the directory, create a file named 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”); }; You”ll receive the output as − What Pug does is, it converts this very simple looking markup to html. We don’t need to keep track of closing our tags, no need to use class and id keywords, rather use ”.” and ”#” to define them. The above code first gets converted to <!DOCTYPE html> <html> <head> <title>Hello Pug</title> </head> <body> <p class = “greetings” id = “people”>Hello Views!</p> </body> </html> Pug is capable of doing much more than simplifying HTML markup. Let’s explore some of these features of Pug. Simple Tags Tags are nested according to their indentation. Like in the above example, <title> was indented within the <head> tag, so it was inside it. However, the <body> tag was on the same indentation, thus it was a sibling of <head> tag. We don’t need to close tags. As soon as Pug encounters the next tag on the same or the outer indentation level, it closes the tag for us. There are three methods to put text inside of a tag − Space seperated − h1 Welcome to Pug Piped text − div | To insert multiline text, | You can use the pipe operator. Block of text − div. But that gets tedious if you have a lot of text. You can use “.” at the end of tag to denote block of text. To put tags inside this block, simply enter tag in a new line and indent it accordingly. Comments Pug uses the same syntax as JavaScript(//) for creating comments. These comments are converted to html comments(<!–comment–>). For example, //This is a Pug comment This comment gets converted to − <!–This is a Pug comment–> Attributes To define attributes, we use a comma separated list of attributes, in parenthesis. 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, gets converted to − <div class = “container column main” id = “division” width = “100” height = “100”></div> Passing Values to Templates 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 code. 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); Then, create a new view file in the views directory, named dynamic.pug, using the following code. html head title = name body h1 = name a(href = url) URL Open localhost:3000/dynamic in your browser and following should be the output. − We can also use these passed variables within the text. To insert passed variables in between text of a tag, we use #{variableName} syntax. For example, in the above example, if we want to insert Greetings from TutorialsPoint, then we have to use the following code. html head title = name body h1 Greetings from #{name} a(href = url) URL This method of using values is called interpolation. Conditionals We can use conditional statements and looping constructs as well. Consider this practical example, if a user is logged in we would want to display “Hi, User” and if not, then we would want to show him a “Login/Sign Up” link. To achieve this, we can define a simple template such as − html head title Simple template body if(user) h1 Hi, #{user.name} else a(href = “/sign_up”) Sign Up When we render this using our routes, and if we pass an object like − this.render(”/dynamic”,{user: {name: “Ayush”, age: “20”} }); It”ll give a message displaying Hi, Ayush. However, if we don’t pass any object or pass one with no user key, then we will get a Sign up link. Include and Components 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 every view, we can use an include. Following example shows how we can use an include − Create three 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”);

Koa.js – Response Object ”; Previous Next A Koa Response object is an abstraction on top of node”s vanilla response object, providing additional functionality that is useful for everyday HTTP server development. The Koa response object is embedded in the context object, this. Let’s 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); When you run this code and navigate to https://localhost:3000/hello then you”ll receive the following response. On your console, you”ll get the request object logged out. { status: 200, message: ”OK”, header: { ”content-type”: ”text/plain; charset=utf-8”, ”content-length”: ”12” }, body: ”Your request has been logged.” } The status and message are automatically set by Koa but can be modified by us. If we don’t set the response body, the status code is set to 404. Once we set the response body, the status is set to 200 by default. We can explicitly override this behavior. We have access to many useful properties of the response using this object. Let us look at some examples − response.header Provides all the response headers. response.status Provides the response status (200, 404, 500, etc). This property is also used to set the response status. response.message Provides the response message. This property is also used to set custom messages with responses. It is associated with response.status. response.body Get or set the response body. Usually, we access it using the context object. This is just another way to access it. The body could be of the type: String, Buffer, Stream, Object or Null. response.type Get or set the content type of the current response. response.get(field) This function is used to get the values of headers with case insensitive value field. response.set(field, value) This function is used to set a header on the response using field and value pair. response.remove(field) This function is used to unset a header on the response using a field name. You can read more about the response object in the docs at Response. Print Page Previous Next Advertisements ”;

Koa.js – Resources ”; Previous Next Following is a list of resources we have used while developing this tutorial − Koajs.com Koajs – Examples A list of examples created by the community List of official and 3rd party middlewares. A CRUD API using koa.js – A short screencast that goes through creating a CRUD API in Koa.js Koa.js Quickstart screencast Introduction to Koa.js and generators Print Page Previous Next Advertisements ”;

Koa.js – Error Handling ”; Previous Next Error handling plays an important part in building web applications. Koa uses middleware 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. For example − var koa = require(”koa”); var app = koa(); //Error handling middleware app.use(function *(next) { try { yield next; } catch (err) { this.status = err.status || 500; this.body = err.message; this.app.emit(”error”, err, this); } }); //Create an error in the next middleware //Set the error message and status code and throw it using context object app.use(function *(next) { //This will set status and message this.throw(”Error Message”, 500); }); app.listen(3000); We have deliberately created an error in the above code and are handling the error in our first middleware”s catch block. This is then emitted to our console as well as sent as the response to our client. Following is the error message we get when we trigger this error. InternalServerError: Error Message at Object.module.exports.throw (/home/ayushgp/learning/koa.js/node_modules/koa/lib/context.js:91:23) at Object.<anonymous> (/home/ayushgp/learning/koa.js/error.js:18:13) at next (native) at onFulfilled (/home/ayushgp/learning/koa.js/node_modules/co/index.js:65:19) at /home/ayushgp/learning/koa.js/node_modules/co/index.js:54:5 at Object.co (/home/ayushgp/learning/koa.js/node_modules/co/index.js:50:10) at Object.toPromise (/home/ayushgp/learning/koa.js/node_modules/co/index.js:118:63) at next (/home/ayushgp/learning/koa.js/node_modules/co/index.js:99:29) at onFulfilled (/home/ayushgp/learning/koa.js/node_modules/co/index.js:69:7) at /home/ayushgp/learning/koa.js/node_modules/co/index.js:54:5 Right now any request sent to the server will result in this error. Print Page Previous Next Advertisements ”;