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 the M.I.K.E. web stack at 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:
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.
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.
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
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:
To add a new page, add an .ejs template and reference it in index.ejs as an include file:
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:
Ensure that the form elements can display the correct validation messages:
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.
When you are satisfied with your app and how it behaves locally, you're ready to deploy it to Modulus. Start by creating 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!
Jen Looper is a Developer Advocate for Telerik products at Progress. She is a web and mobile developer and founder of Ladeez First Media which is a small indie mobile development studio. In her spare time, she is a dancer, teacher and multiculturalist who is always learning.
Subscribe to be the first to get our expert-written articles and tutorials for developers!