This project was generated with the Angular Full-Stack Generator version 3.2.0.
- Git
- Node.js and npm Node ^4.2.3, npm ^2.14.7
- Bower (
npm install --global bower
) - Ruby and then
gem install sass
- Grunt (
npm install --global grunt-cli
) - MongoDB - Keep a running daemon with
mongod
-
Run
npm install
to install server dependencies. -
Run
bower install
to install front-end dependencies. -
Run
mongod
in a separate shell to keep an instance of the MongoDB Daemon running -
Run
grunt serve
to start the development server. It should automatically open the client in your browser when ready.
Run grunt build
for building and grunt serve
for preview.
Running npm test
will run the unit tests with karma.
##Folder Structure
meanshop
├── client
│ ├── app - App specific components
│ ├── assets - Custom assets: fonts, images, etc…
│ └── components - Non-app specific/reusable components
│
├── e2e - Protractor end to end tests
│
└── server
├── api - Apps server API
├── auth - Authentication handlers
├── components - App-wide/reusable components
├── config - App configuration
│ └── local.env.js - Environment variables
│ └── environment - Node environment configuration
└── views - Server rendered views
meanshop/client/app/main
├── main.js - Routes
├── main.controller.js - Controller
├── main.controller.spec.js - Test
├── main.html - View
└── main.scss - Styles
meanshop/server/api/thing
├── index.js - Routes
├── thing.controller.js - Controller
├── thing.model.js - Database model
├── thing.socket.js - Socket events
└── thing.spec.js - Test
-
The client folder contains the AngularJS files and assets
-
The server folder contains the NodeJS files, which handle ExpressJS and MongoDB
-
The e2e files contain the AngularJS end-to-end tests. *Karma: the JS unit test runner *Jasmine: The BDD framework for testing JS code, executed with Karma *Protractor: end to end testing with AngularJS.
-
The node_modules folder contains the requires modules for this project
##Tools
- GruntJS: This tool serves to automate repetitive tasks such as CSS/JS minification, compilation, unit testing, and JS linting.
- Yeoman (yo): This is a CLI tool for scaffolding web projects. It automates the creation of directories and files through generators, and also provides command lines for common tasks.
- Travis CI: This is a Continuous Integration (CI) tool that runs your tests suite every time you commit to the repository.
- EditorConfig: This is an IDE plugin, which loads the configuration from a file, .editorconfig. For example, you can set indent_size = 2, indents with spaces or tabs, and so on. It's a time saver and maintains consistency across multiple IDEs/teams.
- SocketIO: This is a library that enables real-time bidirectional communication between the server and the client.
- Bootstrap: This is a frontend framework for web development. We are going to use it for building the theme throughout this project.
- AngularJS full-stack: This is the generator for Yeoman that will provide useful command lines to quickly generate server/client code and deploy to Heroku or OpenShift.
- BabelJS: This is the js-tojs compiler that allows the use of features from the next generation JavaScript (ECMAScript 6) instantly, without waiting for browser support.
- Git: This is a distributed code versioning control system.
##Package Managers
- NPM: This is the default package manager for NodeJS.
- Bower: This is the frontend package manager that can be used to handle versions and dependencies of the libraries and assets used in a web project. The file bower.json contains the packages and versions to install, and the file .bowerrc contains the path for the location where those packages need to be installed. The default directory is ./bower_components.
##Bower Packages
- angular
- angular-cookies
- angular-mocks
- angular-resource
- angular-sanitize
- angular-scenario
- angular-ui-router
- angular-socket-io
- angular-bootstrap
- bootstrap
- es5-shim
- font-awesome
- json3
- jquery
- lodash