Web app with Node, Express, Jade, Mongoose and MongoDB

It has been a couple of months in our journey to build the open learn project. Our deadline to launch the first version is November 1st (I know, coming up soon). I feel like we’ve made some headway on the technical side and it sure took me some time. Below is a summary of some tips and resources I found to help build a database driven, MVC based web app.

The Recipe

There are few different pieces I had to get comfortable with to build an end-to-end app. Here’s what I have for now:

  1. Node (obviously)
  2. Express (light framework on top of Node to help create a basic server – e.g. accept and make basic http requests)
  3. Jade (templating engine that makes writing html and logic together much easier)
  4. MongoDB (the noSQL database that was recently in the news)
  5. Mongoose (which helps Express talk to MongoDB)

In addition, I had to learn a little bit about Heroku (where the site is hosted), Github (how I share this code with collaborators on the project), and MongoHQ (the database as a service provider).

Getting Started

Given that I have never built an end-to-end web application, there were three distinct stages for me as I was getting started:

  • Hello world
  • Let’s play
  • Piecing together the puzzle

Hello world

So, the first thing I (and I am guessing anyone new to programming) wanted to do was to print Hello World using Node. Turned out, it wasn’t that complicated. I followed the steps exactly as on Heroku’s Node getting started guide (except the database part, which we will get to later) and managed to get the basic app running that outputted “Hello World” to localhost and to the app on Heroku ([app name].herokuapp.com).

Let’s play

Rather quickly after installing the basic app, I realized I didn’t know what to do next. I had hello world on the screen, but what next?

I had been reading the basics of Node.js based on one major source – javascriptissexy.com. The site recommended Professional Node.js as a good book to start from. I had zipped through steps 1 to 9 (barring step 3 which recommended buying another book), but was getting impatient for a step by step tutorial on building my first app. It felt like I hadn’t made *real* progress. Getting a little frustrated, I ultimately bought The Node Beginner Book (from step 3), and suddenly, it seemed like I had, in front of me, exactly what I wanted. This book was a lot simpler and shorter and just walked a reader through building a sample app.

It took me a couple of hours to build the sample app – a simple uploader that would let you upload an image and then display that image. It was fairly basic, however, would break some times (I believe the ebook was a little outdated). This was actually a blessing in disguise as I had to figure out what was broken, hit the forums and Express API and understand why it was broken.

Ultiately, I had the basic app up and running. I could now play with uploading and displaying images. Yay! :)

Piecing together the puzzle

Finally, I could see light at the end of the tunnel. I had a basic app which did more than Hello World! :)

The next stage for me was to understand how to go from this basic app all the way to what I had in mind for Open Learn. I went back to the Professional Node.js book (remember? the one with lots more detail). Chapter 21 of this book goes through building an app using Express so I thought it would be to go back to that. I started structuring my app using that resource and got a little further. However, yet again, it seemed like the book offered way more than what I needed at that time.

I was looking to setup the basic structure of my app and what I was getting from that book was a lot more sophisticated stuff like sessions and authentication.

So, I looked elsewhere and came across two resources on the web (long live the web!):

Given how light Express is, the sample app (MVC) on Github was a great inspiration for my setup. I quickly refactored and restructured my code accordingly. The video tutorials above were a life saver too in reinforcing a lot of basic concepts and explaining stuff I wasn’t entirely sure about in a working environment.

Ultimately, I had to choose which database to use. Initially I had setup Postgres (just because at my previous startup we had used that and I remembered it). In the spirit, however, of learning something new, I decided to go with MongoDB. A quick web search helped me narrow down MongoHQ as the service to go with (given I was on Heroku). Setting up MongoHQ was dead simple too with the instructions here  and here.

Finally, after multiple weekends, I now had a very basic MVC database driven web app running locally as well as on Heroku. Couldn’t be happier. The next few weekends will be dedicated to putting the polishing touches, and actually getting this app to launch state.

  • Pingback: Learning Node, Express, Jade, MongoDB from scratch | Rocketboom()

  • Jed Watson

    Hi Pranav, great to read your write-up on a process very similar to one I also went through not too long ago.

    I settled on the same stack you have used – express / mongo / mongoose / jade (also less) and have been loving it.

    Having made now put a few commercial apps into production on this stack, I’ve been working on a framework you might be interested in looking into called Keystone JS.

    It gives you tools and patterns to simplify setting up routes / session / models / etc. based on what I and my team have found to work well, and also gives you an auto-generated admin ui over your mongoose models, which can be useful.

    If you’re interested, check out keystonejs.com and there’s a demo at demo.keystonejs.com. It’s all open source under the MIT license, and I’d really welcome feedback on it.

    Cheers,
    Jed.

    • Thanks Jed – Keystone looks good, but I really want to build this from scratch – more from a learning mindset!

      Good luck to you with Keystone though! :)

      • Jed Watson

        No problem, Keystone’s just meant to be another tool in your stack (like express or Mongoose) but I totally agree with starting with the more basic building blocks to really understand how it all works.

        Feel free to check out the demo app’s source code as an alternative to the node-express-mongoose-demo you linked, same concepts but organised differently. I’ve always liked how much freedom you get with node.js, even when you’re using frameworks, in how to organise your project in the way that suits you best.

        And if you ever get stuck feel free to reach out, always happy to share experience!

        • that’s a very kind offer – I might take you up on it! :)

    • Bala Kumaran

      Hi Jed

      I’m new in node.js .using keystone Js framwork design new web application but i can’t create user regisetration page(Sign up page). login page automatically created . my deadline for finish app in 2 days only,what can i do?..kindly help me about keystone js.

      Thanks

  • Robin_cubet

    Try sleek.js, Simple, Easy to start, node mvc framework for node js.
    See details at http://sleekjs.com