Learn how to create a web site using MongoDB, Node.js (with Modulus), Kendo UI and Express.js—the M.o.N.K.E.y Stack.
Just in time to usher in the Chinese Year of the Monkey, I'm pleased to announce the launch of the M.o.N.K.E.y Stack! Last April, I introduced the concept of theM.I.K.E. web stackat our conference, Telerik NEXT . M.I.K.E. stands for a web stack built using MongoDB for the database, io.js for the server,Kendo UI for the web widgets and routing, and Express.js for the web tier and managing the server-side API construction and routing. Since last April, a few things have changed. Most importantly, io.js has officially merged back into Node. According to the io.js web site:
There won't be any further separate io.js releases (except for critical security fixes). All of the features in io.js are available in Node.js v4 and above.
If we no longer have to worry about io.js vs. Node, it's probably a good time to revisit M.I.K.E. and spin up a new acronym, M.o.N.K.E.y. Why M.o.N.K.E.y, you ask? Well, instead of io.js, why not go back to the mothership and simply use Node.js for your server tier. This way, you can use MongoDB, Node.js, Kendo UI, and Express.js, and everything will work fine!
With that said, I've created a new badge for you to decorate your web creations' Github repos or web site footers:
I've created some seed code for you to get started with the M.o.N.K.E.y stack so that you can work locally and deploy on Modulus, my Node hoster of choice for this type of project. The tutorial follows below.
Installation and Configuration
I've provided some convenient seed code so that you can get up and running on a Node provider such as Modulus quicker than a chimp can go through the produce section of a grocery store. Here are the steps to get your development environment in shape for MoNKEy to shine.
- Download and install, or update, the Modulus CLI and make sure you have git and npm installed.
- Install MongoDB locally and install a Mongo database management tool. MongoChef works particularly well with Modulus. Once installed, make sure Mongo is started on your local computer by typing mongod. Using MongoChef, create a new database called MIKE on your local machine.
- Clone the seed code: git clone https://github.com/jlooper/MIKE.git . The app code actually resides in the sample-app folder.
- CD to the sample-app folder and type npm install to install the app's dependencies
- CD to this folder and type node app.js. This will start your node instance running on localhost.
- Test your new local site. The two sample routes I have built include a simple contact form with validation, and a more complex form that allows you to build a recipe and view it immediately in a ListView at the top of the page, built using a Kendo UI template.
The three pages of this site look like this:
The Github code is available from the top ribbon
Kendo UI really shines in widgets such as this timepicker
Since we are using Kendo UI Core in this project, we don't have access to the awesomely full-featured Kendo Grid, but you can make a ListView work as a data table in a pinch
More Modular Code
Since this codebase is set up as a SPA, or "single page application" which dynamically loads content and data as they are requested by the client, the original M.I.K.E. stack had all the front end code stored in one big Kendo UI template in one page. One of the enhancements immediately requested by those who attended the initial presentation of this work was to break up the code and make it more modular.
It proved quite easy, in fact, to break up the various pages of the app into separate files. Simply change the location of the pages and set the view engine to be ejs so that you can break up your code into partials and pages:
, __dirname +
To add a new page, add an .ejs template and reference it in index.ejs as an include file:
<% include ../partials/nav.ejs %>
<% include home.ejs %>
<% include contact.ejs %>
Adding validation, also missing in the original code, was easy due to Kendo UI's helpful validator. Before the Ajax form posts, you can make sure that the data is valid:
validator = $(
//post the form
//show an alert
Ensure that the form elements can display the correct validation messages:
"Enter your first name"
In action, this validation looks like this:
This form seems to have failed validation!
By adding a new Kendo UI template, you can create a form that displays the results of the form posting below. The data will be displayed in a Kendo UI ListView widget and includes the ability to delete line items. Try it out here .
Deploy to Modulus
When you are satisfied with your app and how it behaves locally, you're ready to deploy it to Modulus. Start by c reating a project on a Modulus servo:
Create an add-on Mongo database with a new user (e.g. not root) and password:
Create an environment variable called MONGO_DB and add your connection string to this environment variable and save it. It will look something like this:
Watch Out! There's an environment variable already set up called MONGO_URL which you shouldn't use for your new mongoDB connection. Instead, use a new environment variable and the database user and password that you created when you added the database to the account.
When you're ready, CD to your project root and type:
You will be prompted to pick your Modulus project and the site will deploy after a series of steps are passed. When it restarts after this deployment, it will pick up your new environment variable and connection string. You should be able to save data to your database at this point. Try to add or delete a recipe.
Visit the sample web site at http://www.mike-stack.com . This is running on Modulus.
I hope this setup might be useful to you. Let me know in the comments if you are using it, what you are building, and how you've enhanced it. Happy coding!