Structuring a Node.js and AngularJS application

Question

I\'m about to attempt my first AngularJS project, and it makes sense to use Node.js for the back end, even though it means learning both AngularJS and Node.js from scratch a

Answer 1

See this skeleton

https://github.com/Giancarlo1974/SailsAngular

It's integrates Angular 4 + Bootstrap 4 for the client and Node Sails JS for the server

One of the strong points of this solution is: 1) Task Automation 2) Database Agnosticism

Answer 2

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.

Answer 3

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.

Answer 4

I don't agree with all the previous posts. They are either pasted from another place or didn't have their own mind. From my experiences, it's better to flatten your client-side codes. I mean the code inside your client directory should be in your root directory.

Why do I suggest this way? Because if you want to change your full-stack JavaScript project to the one without backend, but only include the frontend, it's much easier. I mean most projects written with JavaScript are focused on the frontend.

It's better to put your backend code in a directory like "server" in the same folder level as like "css", "image"... The advantage of it is that when you need or don't need a backend, just add or delete the "server" directory, and it wouldn't affect the origin project structure.

Like this:

Answer 5

I was investigating the very same thing.

My initial thoughts were directed towards using Express Generator and Angular Seed.

Then I found a much nicer solution:

• http://yeoman.io/
• http://yeoman.io/generators/
• (one of the most popular generators) https://github.com/angular-fullstack/generator-angular-fullstack

One of the most popular yeoman generators provides you with a structure to Node.js and AngularJS applications.

I believe in power of standardisation and new people joining the project will appreciate the unified structure.

Answer 6

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.

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.

---