{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/introducing-koii/","result":{"data":{"markdownRemark":{"id":"fa28286f-b863-574e-ad5a-3c36abf069b6","html":"<p>Happy holidays!</p>\n<p><img src=\"https://miro.medium.com/max/7744/1*GV_r7CooA3csbA0LuWxHnA.jpeg\" alt=\"Koi Fish\"></p>\n<p>I took some time off social media and decided to spend it doing something worthwhile such as contributing to open source projects. Recently, I was working on a gig with a friend of mine where we made use of <a href=\"https://hapijs.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">HapiJS</a> instead of <a href=\"http://expressjs.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ExpressJS</a> (your thought might be HapiJS? What is that? — It’s one of the many Javascript frameworks you have or will hear about, that’s just one of the perks of being a Javascript developer) and since then I’ve fallen in love with the HapiJS community which led me to contribute to the <a href=\"https://www.npmjs.com/package/joi\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Joi</a> validation library some months back.</p>\n<h3 id=\"so-why-koii\" style=\"position:relative;\"><a href=\"#so-why-koii\" aria-label=\"so why koii permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>So, Why Koii?</h3>\n<p><a href=\"https://www.npmjs.com/package/koii\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Koii</a> originally named Koi (had to change the name because it’s already taken by someone else 😣) is an ExpressJS middleware used to print all routes accessible in an application to the console on start. I’ve always struggled when I jump on an existing project and I have to start figuring out the routes that exist and how to access them. Postman collections are a good workaround for folks that struggle with something like this but I created Koii because seeing the available routes on the terminal after every reload is easier for me.</p>\n<p>The idea for Koii was gotten from <a href=\"https://github.com/danielb2\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Danielb2</a>’s <a href=\"https://www.npmjs.com/package/blipp\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Blipp</a> plugin for HapiJS, all I did was create an expressJS variant for it.</p>\n<p><img src=\"https://miro.medium.com/max/2320/1*NTe3GVJURvbhshYkKwYeoA.png\" alt=\"Screenshot of Blipp in an HapiJS project\"></p>\n<h3 id=\"usage\" style=\"position:relative;\"><a href=\"#usage\" aria-label=\"usage permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Usage</h3>\n<p>Setting up Koii in an application is very easy and all it takes is just 3 steps:</p>\n<ol>\n<li>\n<p>Install Koii\nThis can be done by entering the command (depending on the package manager of your choice) in the terminal.</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> koii</code></pre></div>\n<p>or</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">yarn</span> <span class=\"token function\">add</span> koii</code></pre></div>\n</li>\n<li>\n<p>Instruct ExpressJS to use the Koii middleware\nThis is as simple as adding the statement</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">app<span class=\"token punctuation\">.</span><span class=\"token function\">use</span><span class=\"token punctuation\">(</span>koii<span class=\"token punctuation\">)</span></code></pre></div>\n<p>to your application. A sample snippet is shown below:</p>\n<p><div id=\"gist93807938\" class=\"gist\">\n    <div class=\"gist-file\">\n      <div class=\"gist-data\">\n        <div class=\"js-gist-file-update-container js-task-list-container file-box\">\n  <div id=\"file-koii-js\" class=\"file my-2\">\n    \n\n  <div itemprop=\"text\" class=\"Box-body p-0 blob-wrapper data type-javascript  \">\n      \n<table class=\"highlight tab-size js-file-line-container\" data-tab-size=\"8\" data-paste-markdown-skip>\n      <tr>\n        <td id=\"file-koii-js-L1\" class=\"blob-num js-line-number\" data-line-number=\"1\"></td>\n        <td id=\"file-koii-js-LC1\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-s>&#39;use strict&#39;</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L2\" class=\"blob-num js-line-number\" data-line-number=\"2\"></td>\n        <td id=\"file-koii-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\n</td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L3\" class=\"blob-num js-line-number\" data-line-number=\"3\"></td>\n        <td id=\"file-koii-js-LC3\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-k>const</span> <span class=pl-s1>express</span> <span class=pl-c1>=</span> <span class=pl-en>require</span><span class=pl-kos>(</span><span class=pl-s>&#39;express&#39;</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L4\" class=\"blob-num js-line-number\" data-line-number=\"4\"></td>\n        <td id=\"file-koii-js-LC4\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-k>const</span> <span class=pl-s1>koii</span> <span class=pl-c1>=</span> <span class=pl-en>require</span><span class=pl-kos>(</span><span class=pl-s>&#39;koii&#39;</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L5\" class=\"blob-num js-line-number\" data-line-number=\"5\"></td>\n        <td id=\"file-koii-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">\n</td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L6\" class=\"blob-num js-line-number\" data-line-number=\"6\"></td>\n        <td id=\"file-koii-js-LC6\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-k>const</span> <span class=pl-s1>app</span> <span class=pl-c1>=</span> <span class=pl-s1>express</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L7\" class=\"blob-num js-line-number\" data-line-number=\"7\"></td>\n        <td id=\"file-koii-js-LC7\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-k>const</span> <span class=pl-c1>PORT</span> <span class=pl-c1>=</span> <span class=pl-c1>3103</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L8\" class=\"blob-num js-line-number\" data-line-number=\"8\"></td>\n        <td id=\"file-koii-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">\n</td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L9\" class=\"blob-num js-line-number\" data-line-number=\"9\"></td>\n        <td id=\"file-koii-js-LC9\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-s1>app</span><span class=pl-kos>.</span><span class=pl-en>get</span><span class=pl-kos>(</span><span class=pl-s>&#39;/&#39;</span><span class=pl-kos>,</span> <span class=pl-k>function</span> <span class=pl-kos>(</span><span class=pl-s1>req</span><span class=pl-kos>,</span> <span class=pl-s1>res</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L10\" class=\"blob-num js-line-number\" data-line-number=\"10\"></td>\n        <td id=\"file-koii-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">  <span class=pl-k>return</span> <span class=pl-s1>res</span><span class=pl-kos>.</span><span class=pl-en>send</span><span class=pl-kos>(</span><span class=pl-kos>{</span> <span class=pl-c1>status</span>: <span class=pl-s>&#39;success&#39;</span><span class=pl-kos>,</span> <span class=pl-c1>message</span>: <span class=pl-s>&#39;Sample express application&#39;</span> <span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L11\" class=\"blob-num js-line-number\" data-line-number=\"11\"></td>\n        <td id=\"file-koii-js-LC11\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L12\" class=\"blob-num js-line-number\" data-line-number=\"12\"></td>\n        <td id=\"file-koii-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">\n</td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L13\" class=\"blob-num js-line-number\" data-line-number=\"13\"></td>\n        <td id=\"file-koii-js-LC13\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-s1>app</span><span class=pl-kos>.</span><span class=pl-en>use</span><span class=pl-kos>(</span><span class=pl-s1>koii</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L14\" class=\"blob-num js-line-number\" data-line-number=\"14\"></td>\n        <td id=\"file-koii-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">\n</td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L15\" class=\"blob-num js-line-number\" data-line-number=\"15\"></td>\n        <td id=\"file-koii-js-LC15\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-s1>app</span><span class=pl-kos>.</span><span class=pl-en>listen</span><span class=pl-kos>(</span><span class=pl-c1>PORT</span><span class=pl-kos>,</span> <span class=pl-k>function</span> <span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L16\" class=\"blob-num js-line-number\" data-line-number=\"16\"></td>\n        <td id=\"file-koii-js-LC16\" class=\"blob-code blob-code-inner js-file-line\">  <span class=pl-smi>console</span><span class=pl-kos>.</span><span class=pl-en>log</span><span class=pl-kos>(</span><span class=pl-s>&#39;Application running on port &#39;</span> <span class=pl-c1>+</span> <span class=pl-c1>PORT</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n      <tr>\n        <td id=\"file-koii-js-L17\" class=\"blob-num js-line-number\" data-line-number=\"17\"></td>\n        <td id=\"file-koii-js-LC17\" class=\"blob-code blob-code-inner js-file-line\"><span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>\n      </tr>\n</table>\n\n\n  </div>\n\n  </div>\n</div>\n\n      </div>\n      <div class=\"gist-meta\">\n        <a href=\"https://gist.github.com/BolajiOlajide/7649c1f7205fe9b95bb011fe5ef89721/raw/090a002e025d24810b45e60f6ce76c5e6eec0041/koii.js\" style=\"float:right\">view raw</a>\n        <a href=\"https://gist.github.com/BolajiOlajide/7649c1f7205fe9b95bb011fe5ef89721#file-koii-js\">koii.js</a>\n        hosted with &#10084; by <a href=\"https://github.com\">GitHub</a>\n      </div>\n    </div>\n</div></p>\n</li>\n</ol>\n<p>Ensure the instruction to use the Koii middleware is placed at the end of your route definition so the middleware can have access to your defined routes.</p>\n<p>And voila, you should see something similar to the screenshot below once you start your ExpressJS application.</p>\n<p><img src=\"https://miro.medium.com/max/2684/1*u0ATSa_8w0vMA9QXOznAhA.png\" alt=\"Screenshot of Koii in a sample project\"></p>\n<p>Feel free to check out the project on <a href=\"https://github.com/BolajiOlajide/koii\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Github</a> and leave some stars (it helps to know that people are using the tools I build, that will help me focus more on building more 😏).</p>","fields":{"slug":"/posts/introducing-koii/","tagSlugs":["/tag/java-script/","/tag/express/","/tag/koii/"]},"frontmatter":{"date":"2019-01-03T10:44:19.619Z","description":"Introducing my latest project, Koii for ExpressJS developers. Koii makes development workflow easier by printing out the routes in an ExpressJS application on the console.","tags":["JavaScript","Express","Koii"],"title":"Introducing Koii","socialImage":null}}},"pageContext":{"slug":"/posts/introducing-koii/"}},"staticQueryHashes":["251939775","401334301","4120999787"]}