Structuring a Node.js and AngularJS application Structuring a Node.js and AngularJS application angularjs angularjs

Structuring a Node.js and AngularJS application


Things are getting easier as time goes on. I've used Yeoman for the AngularJS front-end, and it makes life much easier: http://yeoman.io/

Option 1, MEAN.io

MEAN is an awesome acronym! I prefer the MEAN stack directory structure. Let's use convention people! Just use the directory structure from mean.io. MEAN is handy too because it throws in all the goodies like Grunt, Bower, etc.

Enter image description here

Option 2, Angular-seed + Express.js

I've searched GitHub for Node.js/AngularJS projects (probably not hard enough) and not seen anything really great for a starting directory structure. So I've merged the Node.js Express.js (running Express.js from the command line using neither EJS nor Jade/Pug) skeleton with the angular-seed project (clone it from GitHub). Then I moved a ton of stuff around. Here's what I came up with:


  • developer - stuff only the developer(s) will use. Does not need to be deployed.
    • config - karma configuration files and others.
    • scripts - developer scripts (build, test, and deploy)
    • test - e2e and unit tests.
  • logs
  • node_modules - this Stack Overflow answer recommended to put this in Git. However this may now be obsolete.
  • public - This comes almost straight from the angular-seed app folder.
    • css, img, js, lib, partials - pretty obvious and nice and short.
  • routes - Node.js routes.
  • server - server-side "shebang" Node.js programs, daemons, cron programs, whatever.
  • server.js - renamed from app.js just to make it more obvious this is server side.

Enter image description here


1) It usually does make some sense to make saas/less files public as you may want to use client-side less->css conversion when debugging (less.js does that). Not sure what your _site contains however (btw you should use lowercase folder for your project, especially for the public stuff).

2) It is usually a good practice to load AngularJS from Google CDN when in production, using only a local version for development, you could have two separate layouts depending on your environment.

3) Even if client-side rendering is the way to go, you may keep server side layout/views rendering, you will probably need it at some point (admin access, email rendering, etc.). However It can be helpful to use the partials name from AngularJS in the public folder to help avoid confusion between server-side views & client-side partials.

You should clearly go for what seems the most logical thing to do at the current time, you will probably move things around as you get familiar with express.


You should check existing express framework to see how they structure their app. For instance, TowerJS has a pretty clean config folder, however they mix up server-side & client-side code which I personally do not like.

Check this comparaison of NodeJS MVC frameworks to see how others do stuff. However, I would clearly start with vanilla express code in order to be in full control & to understand how things work before over-committing on any of theses frameworks.


As suggested it mostly comes down to personal preference and what works for the project you are working on at the time. Everyone you speak to you will have different ideas, and each project has it's own design - what works for one may not work for the other. I expect you'll try quite a few different structures and will soon find one that is the most comfortable - but this will still evolve over time.

I've found the Angular Seed structure to be the cleanest, but again that's personal preference (though, it helps that it's designed by the Angular team.)

You might also consider looking at Yeoman for generating project skeletons.

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

It's a great tool for bootstrapping and managing projects (similar to the way Rails does) and will create a directory structure and skeleton files for you to build upon. Brian Ford wrote an excellent post on using Yeoman with Angular.

I also suggest watching the Angular meetup recordings on their YouTube channel. I recently attended a meetup in Mountain View where these questions came up. Miško recommended Angular Seed and Yeoman (at least as a good starting point.)

To answer your individual questions:

  1. Any files that are compiled server-side should be kept outside ofyour public folder. I would suggest not keeping the likes of masterPSDs, mockups, or any other files that are not meant for publicconsumption (either by browser or user) inside public folders.

  2. It is always good to serve static assets (JS, images, CSS) from aCDN if you expect a high amount of traffic. It's not so importantfor lesser visited sites, but still a good idea. I would start byserving the files locally for initial development. Leave the assetoptimization for when you are nearing your live date. When thistime does come you'll also want to get your caching set up right.Yeoman, for example, presents a good way of versioning your assets.This gives you the advantage of long lived caches but allowing youto push updates of the files to the clients.

  3. If you're index file doesn't require any server-side rendering,serve it statically. I like to keep my backend decoupled from thebackend as much as possible with Angular apps. It helps maintainseparation of concern; when developing the client files, you don'tneed to think about the backend at all (Angular is great for this.)

Really, you just need to play around; try different things out, read blog posts, get ideas from others, ask questions (as you have done here, and on the Angular Google+ community page), watch videos and, if you can, attend meetups - Meetups really are great for this.