folder structure for MEAN stack

Question

I'm following a tutorial on the MEAN stack and I'd like to have a clean folder structure to work with. I've read plenty of articles that say to have a folder for each (let's call it) module of the application with the views/models/controllers/etc.. grouped together.

I like this approach and I've already started doing this, however I'd like some assistance.

right now, my directory structure looks something like this:

• root
  • views
  • models
  • routes
  • public

up till now, I have a main index view with its angular controller, so what I did is, make a new folder under public and named it index

anything with an asterisk is a folder (*)

• root*
  • public*
    • index*
      • index.ejs
      • angular*
        • indexController.js
        • someService.js
      • styles*
        • someCss.Css
      • javascript*
        • some jQuery or js file(s)
    • hypothetical other view folder*
      • otherIndex.ejs
      • angular*
        • otherController.js
        • someService.js
      • styles*
        • someCss.Css
      • javascript*
        • some jQuery or js file(s)

first question is, is this good so far? does all of this belong in the public folder?

my second has to do with the back end. I'm starting to build some models and the tutorial is saying to put them in the models folder. However, I'd rather keep models with their respective "module", so the index model I'd rather put in the folder where the index view lives. probably create a new folder under index called models and add it in there:

• root*
  • public*
    • index*
      • index.ejs
      • angular*
        • indexController.js
        • someService.js
      • styles*
        • someCss.Css
      • javascript*
        • some jQuery or js file(s)
      • model(s)*
        • someModel.js

but this doesn't seem to be the right place to put a model file since this is the public folder, and a model is back-end code. Is there a better approach to what I'm doing? or should I have the models just be in the main models folder? and just have the front end be grouped by 'module' while the models all just sit together in the models folder?

Solution 1

The new MEAN js stack follows a different approach and they no longer have separate server side folder and client side folder. Now the separation is at the module level

You can see that each module has client, server and test folder. For more info you can check out their latest repository.

Solution 2

I came up with my own structure. This helped me during a project. Each * marks a folder.

app folder is for the Backend and public for the Frontend.

• root*
  • app*
    • controllers*
      • main.controller.js
    • models*
      • user.model.js
    • routes*
      • user.route.js
    • tests*
      • user.test.js
    • views*
      • 404.html
  • asset*
    • plugins*
    • external_libraries*
  • bower_components*
  • config*
    • db.js
  • node_modules*
  • public*
    • controllers*
      • main.controller.js
    • modules*
      • main.module.js
    • services
      • main.service.js
    • views
      • user.html
      • home.html
      • index.html
  • bower.json
  • package.json
  • server.js

Comments

[Abdul Ahmad]

Quick question about this. What goes in the public folder? and goes in the scripts folder?

[Rudra]

the public folder will have all you client side dependencies (check bower.json) and the scripts folder can have any kind of scripts like shell scripts, mongodb shell scripts, or any other node scripts like create-user, etc

[Paul]

SO, I get all of this. What I'm struggling with is where to put things like utilities that you want to reuse across modules? I'm thinking specifically server-side utilities, but I guess it applies to clientside as well

[Rudra]

@Paul Create a utility folder and you can keep client as well as server utility files inside that very similar to what we have for a module