Telerik blogs
mike_header

Did you ever sit in front of a browser window, wondering how you were going to create a website, pondering all the options out there and feeling lost and confused when faced with JavaScript framework soup: Angular.js, Ember.js, Knockout.js, Backbone.js or React.js? What about when those frameworks are combined into a stack like the M.E.A.N. stack - Mongodb, Express.js, Angular.js, and Node.js? How do you get started?

What if you just want to create a nice single page application (SPA) that will respond smoothly when the browser shrinks, have the ability to pass data from the front end to the database and back, and have some pretty widgets on the front end? Don't fret. You can do it!

The M.I.K.E. stack was born out of the Progress Software Holiday party after several cocktails, a lot of cheese puff appetizers, and a stimulating chat with Burke Holland and Carl Bergenhem. Despite these inaspicious beginnings, the M.I.K.E. stack fulfills all the requirements I discussed above. So, if you are looking for a stack with more hipster cred than M.E.A.N., or just one that gets the job done, look no further than M.I.K.E.!

Plus, if you deploy your site with M.I.K.E. you have the right to use this awesome badge.

mike_badge_sm

Getting Started

M.I.K.E. stands for MongoDB, io.js, Kendo UI, and Express.js. MongoDB is the database, io.js provides the server layer, Kendo UI gives nice-looking front-end web widgets and a bootstrap-friendly look-and-feel as well as SPA-style page-handling so we can avoid page refreshes, and Express.js provides a handy webserver and a way to construct an API to handle data flow.

Note: I've used Node.js instead of io.js for this tutorial because it was my intention from the beginning to deploy it on Modulus, which specializes in Node.js hosting, although they are going to support io.js in the very near future. You should feel free to try it either way - using io.js or Node.js - the acronym M.I.K.E. just doesn't work as nicely with Node.js.

You can build out a quick M.I.K.E. stack by forking the Github repo, installing the prerequisites and running the site on your local computer. Or you can build it out piece by piece using the steps I'll sketch out below.

Please note, there are a lot of moving parts that I'm not going to cover here, so please do check out the Github repo mentioned above to familiarize yourself with the details. To deploy the site live, I have used Modulus, which offers fast and reliable Node.js hosting. You can see how it looks by visiting the M.I.K.E. homepage.

To begin, make sure you have Node.js and MongoDB installed on your local computer. Learn more about this process here: install node.js and install mongoDB. Make sure Node.js and MongoDB are both running. You're also going to need git and bower installed.

You can build a M.I.K.E. site using any tooling you prefer, on Macs or PCs, but let's cover a series of steps you can use to build it using Visual Studio. To make Visual Studio Node.js-friendly, install the free and very easy to use Node tools by Codeplex. Open Visual Studio and let's get chopping!

Step 1: Scaffold an Express 4 app

With Codeplex's toolset, you just turned Visual Studio into a Node.js IDE. So go ahead and scaffold a basic Express app as shown below:

m1

You should have a nice Express app running on port 1337 in no time.

What just happened? Well, we scaffolded a web app where a bunch of dependencies were installed, along with a public folder where we have images, JavaScript files, and Stylesheets, a routes folder with some sample routes acting like 'traffic signals' for your app, a views folder with Jade templates, an app.js file, which is your base file, and package.json, which lists dependencies to install.

Personally, I don't much like Jade and I'm not going to use Stylus right now, so you can edit package.json and update the installation in Visual Studio:

m2

Our next housekeeping task includes setting our rendering engine to be HTML in app.js:

app.set('view engine','html');

You can also replace the default Jade templates with some simple HTML markup for now in the /views directory:

m3

Step 2: Set up Express routing

Now we're ready to set up some Express.js routes. Routes correspond to views in your site navigation:

m4

Since our initial site has only an index page and a contacts page, we can replace the default scaffolded routes with just one:

var contacts = require('./routes/contact');

Remove any scaffolded routes files in /routes, and create a new contact.js file in that folder.

Step 3: Add Kendo UI with Bootstrap and build your SPA

At this point we can start thinking about the front end and how it will react when the /contact route is called. Assuming you have Bower and Git installed, you can install Kendo UI as follows:

bower install kendo-ui

Kendo UI is installed into a folder called bower_components, along with several dependencies. Make sure bower_components is installed into the /public folder:

m5

I added three more files to ensure that my site was bootstrap-friendly - two from Bootstrap and a place to put custom styles:

/public/javascripts/bootstrap.min.js
/public/stylesheets/bootstrap.min.css
/public/stylesheets/style.css

Then we can start building out index.html as a series of Kendo UI templates:

<script type="text/x-kendo-template" id="home-view">
    <div class="view-content">
        <div class="container content">
            <div class="row">
                <div class="col-sm-12">
                Home
                </div>
            </div>
        </div>
    </div>
</script>

Now we can convert this app into a SPA. To do this, we create a file called app.js in the /bower_components/kendo-ui folder and ensure that it is used to control the page routing:

_MIKE.startSPA = function () {
    _kendoRouter.start();
    _baseLayout.render('#main');
}

In index.html, we add a snippet at the bottom of the page to start the app as a SPA:

<script>
(function() {
    MIKE.startApp();
})();
</script>

Here, we have created a separation of concerns. Our Express routes will be used to control the data flow by managing database calls, and the kendoRouter we just fired up will handle page routing so that when a link is clicked, a div can be rendered as you see above, without refreshing the page - just like a good SPA.

Step 4: Add the Database

Once we have a front-end crafted with a form (see the Github repo for sample form code), we're ready to get data from it.

At this point your local installation of MongoDB should be running. Let's use Mongoose to shape the data that is sent to MongoDB by adding this snippet to app.js:

var mongoose = require('mongoose');
//our database name is 'contacts'. This string will change in production
var connectionString = 'mongodb://127.0.0.1/contacts'
mongoose.connect(connectionString);

Now we can create a file to hold our data model. Add a file called contact.js to the /models folder. Then create a schema that mimics the data coming from your form, and export it:

var mongoose=require('mongoose');
var Schema=mongoose.Schema;
var contactSchema = new Schema({
    fName: String,
    lName: String,
    email: String,
    status: String,
    schedule: String,
    message: String
});
module.exports = mongoose.model('Contact', contactSchema);

To make your data model available to your Express routes, add it to /routes/contact.js:

var Contact = require('../models/contact');

Then, create an API structure to handle the calls to the database. In /app.js, add:

app.use('/api', contacts);

Now start building .ajax calls to pass data over this API and make the front end respond:

$.ajax({
    url: '/api/contacts',
    type: 'post',
    data: serializedDataToPost,
    contentType: 'application/json'
}).done(function (data) {
    $('.alert-success').toggle();
    $(".success-message").html(data.message);
}).fail(function (data) {
    $('.alert-danger').toggle();
    $(".fail-message").html(data.message);
});

When a form posts data over the Express route, we will see it added to the MongoDB database:

m6

What just happened?

We built a website! And here's how it works:

  1. The front end form gathers data;
  2. An ajax call is made via the Kendo UI framework to start the data pass-through;
  3. An Express API route (/api/contact) is used to send data to MongoDB;
  4. The data is shaped up using a Mongoose schema;
  5. Data is sent to MongoDB and success/fail messages are bubbled up from Express to the front end;
  6. Scheduled Mike to come to dinner.

Deploy away!

The M.I.K.E. sample web site lives on a Modulus instance. To deploy it, you simply create an account on Modulus.io, download the CLI toolset, and upload your codebase to a Servo. Create a MongoDB instance attached to your project, and change the connection string in app.js from your local database to reference a variable that you will configure in Modulus:

var connectionString = process.env.MONGO_DB

In your Modulus project, click on the Administration link in the left nav. In the Environment Variables panel, set your connection string to be in the required format:

dbusername:dbpassword@proximus.modulusmongo.net:27017/extra-connection-string-code

This process allows your hosted site to connect to the MongoDB hosted instance as well on Modulus. It all works seamlessly. Modulus offers many more services for your site that I encourage you to explore in more depth than I can cover here.

What will you build?

Use the M.I.K.E. Stack whenever you need to create a nice-looking, responsive SPA that uses Kendo UI on the frontend and a JavaScript-flavored backend using Express, Node, and MongoDB. What will you build? Let us know in the comments!

Background image on header courtesy of Michael Balint


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.