AngularJS comes up without onboard build tools. Just the plain frontend framework. That’s it. Cool, isn’t it? There are several approaches to merge CSS / SCSS, HTML and JS files to get a fully functional frontend. Find out what we really need.
At that point I wanna focus on the stack I’m most used to. It is based on AngularJS, MongoDB, Node.js, ESLint and Grunt. The package management is based on NPM but that should not be THAT worth to mention.
Project structure
Front- and Backend code were managed in a single project. The server with backend APIs run on the same port as the frontend is being served. This is a big advantage in development as watchers react on changes in the whole project and also makes it easy to maintain as there is no base URL for API calls to define. But it also has the disadvantage that the frontend code MUST BE SERVED on the same machine as the backend. This means that there is no way to deliver the frontend via Content Delivery Network (CDN).
A good NPM module that needs to be mentioned is „frontend-dependencies“. This allows copying files from node_modules to a specific folder. We need it to add external dependencies to our frontend.
Cross project frontend libraries were managed using NPM. They were compareable to something like Angular Material but can contain more than just components or directives. They can also include API, login and user management functions, so that you don’t have to write the same code multiple times (DON’T REPEAT YOURSELF).
Folder structure
Frontend files were organized in a single way. Every directive or controller is located in a separate folder with it’s own HTML and SCSS files. In the project, we use only AngularJS controllers, factories, directives, filters and config. All we need to set up a large project like an ERP system. This leads us to the following project structure:
- ERP
- doc
- global
- commonJS (pure JavaScript, for front- and backend)
- dialog (root directives used in dialogs)
- directives
- factories
- img (images used in project)
- json (translation files for multi language support)
- server
- API (all lovely endpoints)
- lib (cross endpoint functions, sorted by topic)
- shell (script files for data import / export)
- test
- updates (update scripts used in project)
- view (controllers sorted by section of application)
The files in global and view folder were merged using grunt-contrib-copy and grunt-contrib-concat module, so that all JS files end up in a single app.js file to be imported in index.html.