MEANJS – How the Home Page is Rendered


MEANJS and the MEAN Stack

By way of simple introduction, the MEAN stack refers to using MongoDBExpressJSAngularJS, and NodeJS – a full JavaScript solution for web development. Once you download and install MongoDB and NodeJS, you can download and install MEANJS, which takes care of all of the integration work for you (including ExpressJS and AngularJS).

If you’re coming from a LAMP background (or something similar), you’ll quickly find that your thinking has to change for MEAN development. MEANJS makes life a LOT easier to get started, but if you’re just diving into it, you may be wondering where your index.html file is. At this point, I’m going to assume you have got everything up and running already, and the Home Page loads for you without issue (if you’re still at this point, the MEANJS setup documentation is actually pretty decent).

 

The Home Page in MEANJS

When I first got my test app up and running, I had no idea how the home page MEANJS Test Apploaded. Once my folder structure was all created, I noticed a public folder located within my testapp folder. I quickly realized that there wasn’t an index.html file here, and I also quickly realized that if I create an index.html file (at testapp > public > index.html), it overrides the home page that was rendering. And that was how the plot thickened…

I played around with my index.html file for a bit, and it didn’t take long to realize that I didn’t have access to any of the powerful features that MEANJS is supposed to bring. I spent the next several days digging around in the code to find out what was happening, starting with my server.js file (located at testapp > server.js). Being new to Views and Controllers, it took some time to understand what was happening.

Fair warning about the rest of this page: I am documenting my discovery of what’s happening. It may be a bit tedious, but if you want to understand what’s happening behind the scenes with MEANJS, this should help.

 

How the Home Page is Rendered by MEANJS

Let’s start with your server.js file, which lives in testapp > server.js. Server.js is a Node file that acts as the core server coordination file. You’ll notice this piece around line 22:

 

// Init the express application
var app = require('./config/express')(db);

 

This line is grabbing the Express file, which sets up a TON of basic server configuration settings, including how to handle different environments (e.g. development vs production) and how to route URL paths requested by the user. You’ll notice that around line 116, you’ll see this:

 

 // Globbing routing files
 config.getGlobbedFiles('./app/routes/**/*.js').forEach(function(routePath) {
 require(path.resolve(routePath))(app);
 });

 

Globbing files is a way to “Match files using the patterns the shell uses, like stars and stuff.” This line helps us identify route files ensure routing is successful in our server’s response to the user.

 

If we follow the path identified by the Glob lines above (testapp > app > routes), we find 3 files there:

  1. articles.server.routes.js
  2. core.server.routes.js
  3. users.server.routes.js

Let’s open up core.server.routes.js. This file is really short – the whole thing looks like this:

 

'use strict';

module.exports = function(app) {
 // Root routing
 var core = require('../../app/controllers/core');
 app.route('/').get(core.index);
};

 

Aha! Our first encounter of the word index! Now we’re getting somewhere. So this core routing file is looking for the right controller, so that it can route the user to the index content. Let’s keep digging. Follow the path identified above to testapp > app >controllers > core.server.controller.js. Here we find another very short file, the contents of which are:

 

'use strict';

/**
 * Module dependencies.
 */
exports.index = function(req, res) {
 res.render('index', {
 user: req.user || null
 });
};

 

On line 7 we find a very important function: res.render(). I admit I got stuck here for a long time, because there was no folder path to follow. However, we can find a key clue in Express’s documentation for res.render(). The documentation states: “Render a view with a callback responding with the rendered string.” At the same level we find the controllers folder, we also find the views folder (testapp > app > views), and this is where all our hopes and dreams are shattered. There’s a file here called index.server.view.html, but none of the content that shows up on the home page. Basically all we find here is that this view “extends ‘layout.server.view.html'”. But we’re not giving up so easy, now, are we? I didn’t think so…

The layout.server.view.html file has some more html, but it’s still not the content we’re viewing on the home page that loads. However, we find yet another clue on line 46:

 

<header data-ng-include="'/modules/core/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-inverse"></header>

 

So let’s run back up the food chain to our main testapp folder and look for a modules folder. It took some poking around, but I found it in the public folder. We can drill down to testapp > public > modules > core > views and BINGO! Here we find the ‘home.client.view.html’ file (as well as the header file we were originally looking for). Within these two files, we find all of the content that shows up on our original page (without any CSS applied).

 

Summary of how MEANJS Renders the Home Page

So let’s recap what we discovered:

  1. MEANJS starts with the server.js file.
  2. It requires then exports (i.e. makes available) the Express config file.
  3. Express helps route user URL requests to the appropriate file (using Glob)
  4. The core routing file identified by Express then looks at the core controller file.
  5. The core controller file uses Express’s res.render() function to render an index view.
  6. The index view to be rendered is found in testapp > app > views folder.
  7. The index view extends the layout view in the same folder (file is named layout.server.view.html).
  8. The layout view includes a header file found in testapp > public > modules > core > views, called header.client.view.html.
  9. In this same folder, we find a home.client.view.html file, where the majority of the content lives that MEANJS renders for the home page.

I’ll be honest, that was a lot of work to figure out what was happening here. There’s still a lot to be discovered, but at least now we know where to begin editing the home page.

Since I come from a LAMP development background, there’s still a lot for me to learn. You MEAN Stack (and especially MEANJS) pros, please feel free to add to what’s going on here in the comments!


4 thoughts on “MEANJS – How the Home Page is Rendered

  • Thanks. I’d done some of this myself, was good to see someone else did too. I think I understand much of express routing by now. But I am still researching what angular routing means.

    • Hi Amit. Thanks for asking – this is pretty straightforward once you understand the overall framework of MEANJS. The short answer is that the file you want to edit is found here: /public/modules/core/views/home.client.view.html. The corresponding controller where you’ll edit your Angular code can be found here: /public/modules/core/controllers/home.client.controller.html.

      The longer answer is this: The file above is the actual html file/content that gets bound to the data-ui-view within the <section data-ui-view></section> tags found in your /app/views/index.server.view.html file (which, in turn, is rendered in the {% block content %}{% endblock %} chunks of your /app/views/layout.server.view.html file on the server).

      So again, if you just edit (or create a new file with the same name and rename the original file) the /public/modules/core/views/home.client.view.html file, you’ll be in the right territory. Just be sure that if you create a new file, you have the right controller name on the first line, where it says <section data-ng-controller="HomeController">. This needs to match the controller name in your controller file, and it needs to be unique (or you’ll see errors).

      One last thing… If you want an example of login using MEANJS, you can find that in /public/modules/users/views/authentication/signup.client.view.html and /public/modules/users/views/authentication/signin.client.view.html/public/modules/users/controllers/authentication.client.controller.js. (Note that both views use the same controller here).

      I hope that works for you. Let me know if I can help with anything else!

Leave a Reply

Your email address will not be published. Required fields are marked *