I’ve been writing quite a lot of Koa applications, but most of them have been small. Now I’m doing a little bit bigger website. It consists of three parts:
- A public site that is just static html, served with static-now. The site will do API calls back to the server for the content.
- An administration site for administration of the text content of the site. This will be based on my example koa example blog
- An API serving the content from use form the static site.
Absolutely nothing humongous but still big enough that you need to think about application structure a little bit.
That’s when I came to think about koa-mount. In this post I wanted to show you what I’ve learned about this powerful little middeleware, at the heart of Koa thinking.
The tag-line on the koa-mount page says it all really:
Mount other Koa applications or middleware to a given pathname
That sounds easy but how does it really work and what opportunities does this give us? I think it’s easiest to show with an example:
Basic (?) example
This is the example code that koa-mount supplies. Let’s walk through it:
- At line 4-9 we create a small little Hello application that simply 1.1. wait until all other middleware has answered 1.1. always return ‘Hello’ in the body
- Line 11-16 sets up a very similar application always returning ‘World’ in the body
- Now.. the interesting things happens on line 21 and 22.
1.1. See on line 21 that we are ‘mounting’ the
aapplication under the path
/hello1.1. And the
worldis mounted under
- The final part 24-25 just starts the application on
Now if you were to go to
http://localhost:3000 you’ll get a
Not found since no-one is listening there.
http://localhost:3000/hello will of course answer
- That’s it really, but sadly I find this example a little bit over complicated. The apps are not really apps. They are koa middleware and the
yield nextis a little bit distracting.
- Also, in this case the examples applications are in the same file, which doesn’t really show the power of this.
Let’s improve this a bit.
Let’s address the second point above first, because that’s trivial. Moving the applications to separate files are very simple. I moved them into a sub directory called
subapps Here’s the
Only thing worth noticing is that I’ve exposed the
app object using
var app = module.exports = koa(); on line 2.
/subapps/world.js application. Exactly the same:
Ok, this turns out very beautiful in the main application now:
Here’s we’re just stitching together the application, giving each sub application the path under which they operate.
But that’s still “just” middle ware. Let’s see what a little more real application would look like.
Here’s an application using koa-route to create some routing:
Very simple: at the root of this application we return a string informing the users that they have reached the index of the sub app. The second route takes a
name querystring parameter that we return in a EcmaScript 6 templated string (Achievement unlocked!)
In our “main” application we can do this:
Now we can reach our sub application by going to
http://localhost:3000/subApp which will return
You are on the index of the sub app. From
http://localhost:3000/subapp/user/marcus we will get a nice message greeting … well me.
As a finale to this example I show how you can mount another instance of the application in another path. So
http://localhost:3000/sub/app/and/a/very/deep/path/user/marcus will again display a nice greeting.
In fact you could also use the same instance of the sub application if you wanted. Like this:
koa-mount is perfect to compose bigger applications into smaller parts. Maybe you already have a blog application that you can reuse and just include under the
/blog path. That’s one line of code using
Bringing it back to my application that I’ve described at the top it will have a main application that looks something like this:
In each of the directories I can now create and keep the site modular and nice. In fact I could create them as separate packages too if I wanted and then just mount the packages.
Get on the mounting-train - it’s good for you.
I’ve put these files and examples up on github should you want to play with it.
Published byon Last updated