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

Answer 1

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

Answer 2

I had the same problem while I was trying to write MEAN stack. Moreover, I was using my own silly structure.

- backend
------ api
----------- controllers
----------- middleware
----------- models
----------- routes
------ node_modules
------ app.js / package.json - package-lock.json / server.js

- frontend <!-- angular frontend-->
----------- angular components

I did research for a while. I found this link very useful, and I am following the structure where shown on the link.

- app               <!-- holds all our files for node components (models, routes) -->
----- models
---------- todo.js  <!-- defines the todo model -->
----- routes.js     <!-- all routes will be handled here -->

- config            <!-- all our configuration will be here -->
----- database.js

- public            <!-- holds all our files for our frontend angular application -->
----- core.js       <!-- all angular code for our app -->
----- index.html    <!-- main view -->

- package.json      <!-- npm configuration to install dependencies/modules -->
- server.js         <!-- Node configuration -->

Answer 3

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.