structuring a nodejs and angular js app

structuring a nodejs and angular js app  using -'javascript,angularjs,node.js'

I'm about to attempt my first Angular JS project and it makes sense to use Node JS for the back end, even though it means learning both Angular and Node from scratch at the same time.

The first thing I'm trying to get my head round is a good file structure. So far my Pure HTML/CSS template has the following directory structure....


( _site is a working directory for PSDs etc)

I found an example directory structure for a Node/Angular app here....

... which suggests the following directory structure

app.js              --> app config
package.json        --> for npm
public/             --> all of the files to be used in on the client side
  css/              --> css files
    app.css         --> default stylesheet
  img/              --> image files
  js/               --> javascript files
    app.js          --> declare top-level app module
    controllers.js  --> application controllers
    directives.js   --> custom angular directives
    filters.js      --> custom angular filters
    services.js     --> custom angular services
    lib/            --> angular and 3rd party JavaScript libraries
        angular.js            --> the latest angular js
        angular.min.js        --> the latest minified angular js
        angular-*.js          --> angular add-on modules
        version.txt           --> version number
  api.js            --> route for serving JSON
  index.js          --> route for serving HTML pages and partials
  index.jade        --> main page for app
  layout.jade       --> doctype, title, head boilerplate
  partials/         --> angular view partials (partial jade templates)

So, this looks quite good to me (except for the fact that I wouldn't use Jade)

I still have the following questions...

I want to keep all front-end and back-end files separate. This solution puts all the front-end files in the public/ directory which kind of makes sense because most need to be public, but does it make sense to put the SASS and _site folders here? I could just keep them there but not upload them when I put them into production but it seems wrong because they shouldn't be public. They also don't belong at root level with all the Back-end stuff.
Wouldn't it be better to load Angular from a CDN?
Given that the server will only need to deliver one template (the main app template) and all other HTML will be constructed on the front-end wouldn't it make more sense to keep the index.html file static, delete the views folder and create a partials/ folder under public/ like the original Angular Seed app does ?

I realize that this is all a matter of opinion and I could technically put them wherever I want but I'm hoping somebody more experienced than me could advise me of the pitfalls of various directory structures.

As you can tell, I'm new to this. Any help would really be appreciated.

asked Oct 7, 2015 by sumit_jaiswalmca
0 votes

4 Answers

0 votes

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.

answered Oct 7, 2015 by abhimca2006
0 votes

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 of your public folder. I would suggest not keeping the likes of master PSDs, mockups, or any other files that are not meant for public consumption (either by browser or user) inside public folders.

  2. It is always good to serve static assets (JS, images, CSS) from a CDN if you expect a high amount of traffic. It's not so important for lesser visited sites, but still a good idea. I would start by serving the files locally for initial development. Leave the asset optimization for when you are nearing your live date. When this time 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 you to 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 the backend as much as possible with Angular apps. It helps maintain separation of concern; when developing the client files, you don't need 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.

answered Oct 7, 2015 by vickeykumar66
0 votes

I think this is an excellent question.

Option 1,

MEAN is an awesome acronym! I recently edited this answer to prefer the MEAN stack directory structure. Let's use convention people! Just use the dir structure from MEAN is handy too b/c it throws in all the goodies like grunt, bower, etc.

enter image description here

Option 2, Angular-seed + Express

I've searched github for node/angular projects (probably not hard enough) and not seen anything really great for a starting directory structure. So what I've done is merged the node express (Running express from the command line using neither ejs nor jade) skeleton with the angular-seed project (clone it from gitub). 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 config files and others.
    • scripts - developer scripts (build/test/deploy)
    • test - e2e and unit tests.
  • logs
  • node_modules - a separate SO question recommended to put this in git
  • public - This comes almost straight from the angular-seed app folder.
    • css, img, js, lib, partials - pretty obvious and nice and short.
  • routes - node routes.
  • server - server side "shebang" node progams, daemons, cron programs, whatever.
  • server.js - renamed from app.js just to make it more obvious this is server side.

enter image description here

If you have any suggestions or better ideas, please leave a comment. Thanks!

answered Oct 7, 2015 by r3tt
0 votes

Ethan Garofolo in his nodecasts suggests a convenient solution for structuring a nodejs app

answered Oct 7, 2015 by vibhorsingh