Koa / Vue.js SPA Template
A few months back, I tackled building an ASP.NET Core / React SPA template. Then, wanting to play with Vue.js, I created another template with the same ASP.NET Core backend but switched out the frontend with Vue.js. Those templates were fun to build and I learned quite a few things along the way.
I really enjoyed working with Vue.js and have recently been wanting to play around with Koa 2, especially since it works with async/await out of the box. So, I decided to use the Vue.js frontend I had swapped out previously and to swap out the ASP.NET Core backend with Koa.
Ok, let’s summarize my crazy templating activity lately because it’s gotten a little complicated:
| Template 1 | Template 2 | Template 3 | |
|---|---|---|---|
| Backend | ASP.NET Core | ASP.NET Core | Koa 2/Node |
| Frontend | React | Vue.js | Vue.js |
| Link | Link | Link |
Using the same basic functionality for the templates and swapping out the frameworks/languages used has turned out to be effective for learning because I have been able to focus on the ins-and-outs of the technology I am working with instead of getting caught up on the functionality of the app. Also, it’s been fun comparing the implementation differences bettwen them. For example, setting up JWT authentication with Koa 2/Node was a cake walk compared with getting it to work in ASP.NET Core!
Now, about the Koa / Vue template. It took about a week to knock out and I really enjoyed working with both Koa and Vue.js. As part of scaffolding the Koa app, I came across TypeORM which is in alpha currently but is a really nice TypeScript based ORM that works well with PostgreSQL. Also, by the same talented developer (Umed Khudoiberdiev), I used routing-controllers which takes advantage of TypeScript decorators to build really clean Koa controllers. Using this library feels like setting up ASP.NET Core controllers, which I consider a good thing.
Here is what the app looks like:
Here is a survey of all the tools, technologies, concepts, etc. that went into this template project. Admittedly, I didn’t have to use all of these but it was fun to do so and I learned a lot.
Server
- Koa 2
- PostgresSQL
- TypeScript
- TypeORM (data-mapper ORM)
- routing-controllers (decorated, class-based controllers in Koa)
- Docker used for development PostgresSQL database and MailHog server
Client
- Vue.js
- Single-file components (.vue)
- TypeScript
- Webpack for asset bundling and HMR (Hot Module Replacement)
- Bootstrap CSS
- Fetch API for REST requests
Testing
- Mocha
- Chai
- TypeScript
- MailHog for development email delivery
DevOps
- Ansible playbook for provisioning (Nginx reverse proxy, SSL via Let's Encrypt, PostgresSQL backups to S3)
- Ansible playbook for deployment
Source
Here is the GitHub repo with the template source: https://github.com/bradymholt/koa-vuejs-template