Single-page app built with AngularJS, Express, Mongoose, and Node.js using the Yeoman Angular scaffolding.
Users can create an account in which they add tasks and delete them when completed. The tasks will self-destruct after 7 days if not completed.
Configuring this project should be consistent across Mac (local) and Vagrant. You should already have Node.js and MongoDB installed before cloning.
Start by cloning the repository
$ git clone https://github.com/carmenvkrol/blocitoff.git
This app uses Grunt to run tasks. Install the Grunt Command Line Interface (grunt-cli) locally on your machine.
$ npm install -g grunt-cli
Once that's complete, install the remaining dependencies, except Bower, by running
$ npm install
Then install the package manager Bower by running:
$ bower install
Three tabs must be open in the terminal in order to run this application.
In the first tab, run
$ mongod
In the second tab, run
$ npm start
In the last tab, run
$ grunt serve
The application runs on port 1337 (configured in Gruntfile.js). To change the port, modify the number highlighted below
...
connect: {
options: {
port: 1337, // change this value to the desired port number
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
...
blocitoff/
|__.tmp/
|__app/ #client-side development and server-side files
|__bower_components/
|__dist/ #client-side production files
|__node_modules/
|__test/
Gruntfile.js
index.js/ #core server-side file
Grunt looks for files using a defined pattern so that it knows what to compile and copy and where to put it. To edit the files that Grunt watches, look at the array of files in the watch task in Gruntfile.js. The default watched files are:
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js', '!<%= yeoman.app %>/scripts/expresscontrollers/*.js', '!<%= yeoman.app %>/scripts/models/*.js', '!<%= yeoman.app %>/scripts/passport.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: true //'<%= connect.options.livereload %>'
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['newer:less', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
recess: {
files: ['<%= yeoman.app %>/styles/{,*/}*.less'],
tasks: ['recess:dist']
},
This app uses the CSS pre-processor LESS in order to facilitate styling with Bootstrap, which is included. LESS files can be found in the styles folder under the app directory. (See Directory Structure section above to locate these). In order for these files to be converted into CSS, and modify styling in the views, save LESS files within the styles folder.
The client-side files for user authentication, which are used in the [/] (https://github.com/carmenvkrol/blocitoff/blob/master/app/views/AuthView.html) view, are in the app directory within the public directory. The server-side functionality is also in the app directory within the expresscontrollers folder. (See Directory Structure section above to locate these).
The client-side functionality for tasks, which are used in the /tasks view, can be found in the app directory . The server-side functionality is also in the app directory within the expresscontrollers folder. (See Directory Structure section above to locate these).
A list of the plugins used by Grunt and what they're used for:
Grunt - installs grunt, which automates many JavaScript tasks
Grunt-Autoprefixer - parses CSS and adds vendor-prefixed CSS properties
Grunt-Concurrent - runs grunt tasks concurrently
Grunt-Contrib - collection of common grunt tasks
Grunt-Contrib-Clean - cleans files and folders
Grunt-Contrib-Concat - concatenates files for production mode
Grunt-Contrib-Connect - starts a static web server
Grunt-Contrib-Copy - copies files and folders for production mode
Grunt-Contrib-CSSmin - minifies CSS files for production
Grunt-Contrib-HTMLmin - minifies HTML files for production
Grunt-Contrib-Imagemin - minifies image files for production
Grunt-Contrib-JShint - detects potential errors and problems in the JavaScript code
Grunt-Contrib-Less - compiles LESS files into CSS. See LESS section below for more details about styles in this application.
Grunt-Contrib-Uglify - compresses and minifies JavaScript files
Grunt-Contrib-Watch - runs predefined tasks whenever watched files patterns are added, changed, or deleted
Grunt-Filerev - static asset revisioning through file content hash
Grunt-Google-CDN - replaces refs on the Google CDN
Grunt-Karma - for running Karma, a test runner for JavaScript.
Grunt-Newer - configures grunt tasks to run with newer files only
Grunt-Ngmin - pre-minifies Angular code
Grunt-Recess - lint and minify CSS and LESS using RECESS, which keeps style code clean and manageable
Grunt-SVGmin - minifies SVG files
Grunt-Usemin - replaces references to non-optimized scripts or stylesheets into a set of HTML files
Grunt-Wiredep - injects Bower packages into source code
Load-Grunt-Tasks - loads grunt tasks simulataneously instead of individually
Time-Grunt - displays elapsed execution time of grunt tasks
A list of other plugins used in this application and their purpose:
Express - web framework for Node.js
Express-Session - keeps track of users as they go through the app
Body-Parser - middleware that parses body data
Bower - package manager
Connect-Flash - stores messages during sessions. These messages are written to the flash and cleared after being displayed to the user.
Connect-Mongo - stores relevant user data from MongoDB during session
Cookie-Parser - parses cookie header and populates req.cookies with an object keyed by the cookie names
JSHint-Stylish - stylish reporter for JSHint
Karma - test runner for JavaScript
Karma-Jasmine - adapter for Jasmine testing framework to be used with Karma
Karma-PhantomJS-Launcher - launches JavaScript in PhantomJS, which is a headless WebKit scriptable with a JavaScript API
Mongoose - MongoDB object modeling for Node.js
Passport - authenticates users based on the credentials they provide
Passport-Local - username and password authentication
Passport-Local-Mongoose - Mongoose plugin the simplifies building username and password login with Passport
App built as part of the [Bloc] (http://www.bloc.io) Front-End Developer program.