Telerik blogs

MoNKEy-Stack-2016

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:

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:


MoNKEy-Stack-Badge

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.

  1. Download and install, or update, the Modulus CLI and make sure you have git and npm installed.
  2. 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.
  3. Clone the seed code: git clone https://github.com/jlooper/MIKE.git. The app code actually resides in the sample-app folder.
  4. CD to the sample-app folder and type npm install to install the app's dependencies
  5. CD to this folder and type node app.js. This will start your node instance running on localhost.
  6. 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:

MoNKEy-Stack-Home

The Github code is available from the top ribbon

MoNKEy-Stack-Contact

Kendo UI really shines in widgets such as this timepicker

MoNKEy-Stack-Links

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

Features

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:

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

This way, you can scale your app by creating .ejs pages as separate Kendo UI templates in the /pages folder, keeping headers and JavaScript includes in the /partials folder:

MoNKEy-Stack-Modular

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 %>

Validation

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:

var validator = $("#contactForm").kendoValidator().data("kendoValidator");
 if (validator.validate()) {
     //post the form
 } else {
     //show an alert
 }

 Ensure that the form elements can display the correct validation messages:

<div class="col-lg-6">
 <input id="fName" required validationMessage="Enter your first name"  data-bind="value: fName"  name="fName" type="text" placeholder="First Name" class="form-control">                                
</div>

<div class=
"col-lg-4">
  <span class="k-invalid-msg" data-for="fName"></span>
</div>

In action, this validation looks like this:

MoNKEy-Stack-Validation

This form seems to have failed validation!

CRUD features

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.

$.ajax({
 url: '/api/lists',
 type: 'post',
 data: serializedDataToPost,
 contentType: 'application/json',
 success: function(result) {
$('#recipeListView').data('kendoListView').dataSource.read();
 }
})

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 creating a project on a Modulus servo:

MoNKEy-Stack-Modulus

Create an add-on Mongo database with a new user (e.g. not root) and password: 

MoNKEy-Stack-Modulus-Add-On

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:

mongodb://myNewUser:myNewPassword@apollo.modulusmongo.net:27017/guxoW9ox

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:

modulus deploy

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.

Enjoy!

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 at Telerik.
About the Author

Jen Looper

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.

Comments

Comments are disabled in preview mode.