Client

Client Structure

Name	Description
client/bower_components/	Folder:all frontend dependencies
client/images/	Folder:all Global images
client/modules/	Folder:all dynamic modules to run mean stack js
client/styles/	Folder:all Global styles
client/uploads/	Folder:all Global uploads

Mean Stack JS Dependencies

Client dependencies should be available after first running npm install. They may also be installed or updated at any time using bower install. For more options check out the bower web site.

File Structure

Because Mean Stack JS follows the principle of separation of concerns, all client-side files are stored under the /client directory in the root directory. Within this directory are several subdirectories containing the following:

Directory	Contents
bower_components	Front-end dependencies managed through bower
images	Global images
modules	Subdirectories of modules containing development files for javascript, HTML markup, and stylesheets - this is where most work will be done
scripts	Compiled javascript for production use
styles	Global styles and compiled css for production use
uploads	Files uploaded by users

Frontend Modules

Mean Stack JS comes with several modules included to create a starting point for most projects.

• [Core] - Main module that pulls everything together
• [User] - User Management
• [Blog] - Example Blog Module
• [Header] - Module for navigation and content in the header tag
• [Footer] - Module for content in the footer tag
• [Index] - Homepage module

Adding a Module

Modules can be quickly and conveniently generated by the CLI tool built into Mean Stack JS. Simply run npm run cli and answer a few basic questions to create only frontend modules or both frontend and backend modules. The CLI tool will generate views, controllers, services, and test files to create a working baseline for a CRUD (create, read, update, delete) module. Otherwise, modules may also be created manually in the modules directory using the the naming scheme for new files that is used for built-in module files.

Note: When creating new modules or module files the server must be restarted in order for the new files to be served.

Removing a Module

Modules may be removed by deleting the module directory or moving it out of the project directory.

Styles

Because Mean Stack JS is preprocessor-agnostic, SASS, LESS, and vanilla CSS are all available for use (even together!) and will be automatically compiled and saved in the /client/styles/compiled directory when style files are changed while the server is running. Module-specific styles live in their respective module directory while global styles are located in the /client/styles directory.

Angular Routes

Client-side routes can be found in the moduleName.routes.js file in a module directory. A router helper provider is used to simplify angular routing. All routes use ui-router and must follow the ui-router api. A route/state may be added by adding an object in the following format to the array:

{
    state: 'create',
    config: {
        url: '/blog/create',
        templateUrl: 'modules/blog/create.view.html',
        controller: 'BlogController',
        controllerAs: 'vm',
        resolve: {
            loggedin: function (UserFactory) {
                return UserFactory.checkLoggedin()
            }
        }
    }
},

Retrieving User Data and State

UserFactory can be injected into any controller or service to provide needed information. A simple set of properties satisfies most use cases.

Property	Description
user	Object: Contains email, profile, and roles if logged in, empty if logged out
loggedin	True if logged in, false if logged out
isAdmin	True if user is an admin, false if not
checkLoggedOut()	Used to check if the user is logged out
checkLoggedin()	Used to check if the user is logged in
checkAdmin()	Used to check if the user has admin role

UserFactory may also be assigned to the view-model within a controller for use in views like so.

// In controller
vm.UserFactory = UserFactory;

<!-- In view -->
<p ng-show=”vm.UserFactory.loggedin”>
	Hello, {{vm.UserFactory.user.profile.name }}!
</p>

Logging and Alerts

Toastr is included in Mean Stack JS and is used to display a visual alert to the user while at the same time outputting more detailed information to the browser’s console. To use this feature, simply inject logger into your controller or service to use the simple api. Its error, info, success, and warning methods all take the same arguments in this order: message – type string, data – type any, title – type string.

logger.warning('Data not valid', vm, 'Blog Post Validation')

Views

Client views are located in module directories and are suffixed with .view.html. By default, Mean Stack JS includes both a header and a footer. The parent view of the single-page application is held in the core module’s view. It includes the header and footer using angular’s ng-include directive. The homepage view is located in the index module while 404 and 505 error page views are located in the core module.

Form Validation

Views and controllers for the built-in blog and user modules include validation. User passwords by default must be at least six characters and contain at least one letter, one number, and one symbol. Basic validation is included for form inputs in CLI generated views and controllers.

Adding Dependencies

Additional dependencies can be added with the use of bower.

bower install package-name --save

Dependencies may also be manually saved in the /client directory. In any case, paths to the dependency files must then be saved in the assets object inside /configs/settings.js using the file's path relative to the /client directory. Another option is adding a file url (eg. libraries accessed through a CDN) in the assets object .

Note: After the addition of any dependencies the server must be restarted for the new files to be served.

Testing

Mocha and Chai are the default testing and assertion libraries used for frontend unit tests with karma as the test runner. The CLI tool generates tests with passing test cases when a frontend module is created. Test files reside in their respective module directories with the filename suffix .spec.js. To run unit tests simply run npm run karma in the command line.

End-to-end tests are run using Nightwatch with test files located in /tests/e2e. They can be run using npm run nightwatch in the command line.

Mean Stack JS follows the JavaScript Standard Style. Testing javascript files to make sure they follow this standard can be done by running npm run standard in the command line.

All of the above tests can be run at once using npm test.

Theming Styling

Overview

We've set up this framework to automatically aggregate, compile and reference all styling files likes css, scss and less. You can use any of the styling syntax. We don't care. We made it easy for you to get going and style it out. Although we prefer usage of scss.

We wanted this mean framework to be UI framework agnostic. Meaning anyone should be able to choose different UI frameworks that suits their cup of tea and needs. We've used bootstrap as an example. Frameworks like bootstrap, zurb foundation and material interchangeable. The mean framework is not dependent on them.

Global.styles.scss

This is the file where most of the magic will happen. This is where you will import framework styles, import custom variables override UI framework variables and define sitewide styles to create your custome theme.

Module specific styling

In each module you can include a .scss file. This is where you can define module specific styles so that you can easily debug and change styles in development.

Environment based compiling

As you get to a solid code base. We want some optimized code and file size. Setting the mean framework into a production state will compile and minify all the styling files.

For development module.style files will be compliled and referenced independently. Making it easy debug and find where the styling code is.