Build a task app with Hapi, MongoDB and Vue.js

Hapi Node.js framework for the server, MongoDB for the database and Vue.js for the client side application.

The idea for this tutorial is we’re going to build a task app with Node.js, MongoDB and Vue.js. Users will be able to read, create and delete tasks from their web browser. All of the tasks will be stored in the database and updates will happen asynchronously from the web browser. That means users won’t have to refresh the page in order to see the changes take effect. This application is straightforward and should provide a clear introduction to how build with Node.js, MongoDB and Vue.js.

The final product will look something like this:

Example todo app using Node.js server, Mongo database and Vue client side app.

🐙 The server side code is open source on GitHub.

🐱 The client side code is open source on GitHub.

To begin with, we’re going to start by building the server. Therefore we’ll have to introduce…

Hapijs

Hapi is a Node.js server framework that’s used by great companies such as Lob, Stitch Labs and Auth0. To get started generate a project with npm init and use this as your main server file:

const Hapi     = require('hapi');
const routes   = require('./routes');
require('./utils/database');