Single-page app built with AngularJS, Express, Mongoose, and Node.js using the MeanJS Yeoman scaffolding.
Users can create an account in which they create and edit bookmarks. The bookmarks can include a link, comments, and tags. Users can search bookmarks and sort them by tags. The tags can be edited and deleted.
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/bloc3.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 by running
$ npm install
Two tabs must be open in the terminal in order to run the application.
In one tab, run
$ mongod
In the other, run
$ grunt
The application runs on port 3000 (configured in /config/env/all.js). To change the port, modify the number highlighted below
'use strict';
module.exports = {
app: {
title: 'bloc3',
description: 'Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js',
keywords: 'MongoDB, Express, AngularJS, Node.js'
},
port: process.env.PORT || 3000, //change this value to the desired port number
...
bloc3/
|__app/ #server-side files that handle functionality of bookmarks, tags, and user authentication
|__config/ #server-side files that handle configuration of app, including local port
|__node_modules/
|__public/ #client-side files in AngularJS and LESS
| |__dist/ #production mode files
| |__img/
| |__lib/
| |__modules/ #development mode files
| | |__articles/ #bookmarks and tags
| | |__core/ #home (landing)
| | |__users/ #sign in and sign up
Gruntfile.js
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:
var watchFiles = {
serverViews: ['app/views/**/*.*'],
serverJS: ['gruntfile.js', 'server.js', 'config/**/*.js', 'app/**/*.js'],
clientViews: ['public/modules/**/views/**/*.html'],
clientJS: ['public/*.js', 'public/modules/*/*.js', 'public/modules/*/*[!tests]*/*.js'],
clientCSS: ['public/modules/**/*.css'],
mochaTests: ['app/tests/**/*.js']
};
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 CSS folders under the articles, core, and users directories - all of which are located in the public 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 these CSS folders.
The client-side files for user authentication, which are used in the [/signup] (https://github.com/carmenvkrol/bloc3/blob/master/public/modules/users/views/authentication/signup.client.view.html) and /signin views, are in the users directory within the public directory. The server-side functionality is in the users files within the app folder. (See Directory Structure section above to locate these).
The client-side functionality for bookmarks and tags, which are used in the /tags and /articles views, can be found in the articles directory within the public directory. The server-side functionality is found in the articles files within the app folder. (See Directory Structure section above to locate these).
A list of the plugins used by Grunt and what they're used for:
Grunt-Cli - provides access to grunt via command line in terminal
Grunt-Concurrent - runs grunt tasks concurrently
Grunt-Contrib-CSSlint - lint CSS files
Grunt-Contrib-CSSmin - minifies CSS 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-Env - predefined Grunt tasks run for specified ENV configurations
Grunt-Karma - for running Karma, a test runner for JavaScript.
Grunt-Mocha-Test - runs server-side mocha tests
Grunt-Ngmin - pre-minifies Angular code
Grunt-Node-Inspector - debugs Node.js
Grunt-Nodemon - monitors any changes in Node.js and automatically restarts the server
Grunt-Recess - lint and minify CSS and LESS using RECESS, which keeps style code clean and manageable
Load-Grunt-Tasks - loads grunt tasks simulataneously instead of individually
A list of other plugins used in this application and their purpose:
Async - provides functions for working with asynchronous JavaScript
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
Compression - middleware that compresses response data
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
Consolidate - template consolidation library
Cookie-Parser - parses cookie header and populates req.cookies with an object keyed by the cookie names
Forever - ensures that script runs continuously
Glob - matches files that are called with an asterisk (*)
Helmet - helps secure app
Karma - test runner for JavaScript
Karma-Chrome-Launcher - launches JavaScript code in Chrome browser in order to test with Karma
Karma-Coverage - generates code coverage for Karma
Karma-Firefox-Launcher - launches JavaScript code in Firefox browser in order to test with Karma
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
Lodash - utility library for JavaScript. Simplifies writing certain code, such as comparing values between multiple arrays.
Method-Override - allows the use HTTP verbs, such as PUT and DELETE, in places where the client doesn't support it
Mongoose - MongoDB object modeling for Node.js
Morgan - automates logging of requests
Nodemailer - sends emails with Node.js
Passport - authenticates users based on the credentials they provide
Passport-Facebook - Passport authentication for Facebook users
Passport-Github - Passport authentication for Github users
Passport-Google-OAuth - Passport authentication for Google users
Passport-LinkedIn - Passport authentication for LinkedIn users
Passport-Local - username and password authentication
Passport-Twitter - Passport authentication for Twitter users
Request - simplifies HTTP calls
Should - keeps test code clean and error messages helpful
Supertest - simplifies HTML assertions
Swig - compiles and renders JavaScript templates
App built as part of the [Bloc] (http://www.bloc.io) Front-End Developer program.