express-angular-seo-zombie-seed

NodeJS + ExpressJS + MongoDB + Angular (MEAN stack) with requireJS and using zombie for SEO

##Tech Stack##

• NodeJS with Express JS
• MongoDB with Mongoose layer
• Google cloud storage for CDN

##Frameworks##

• Express JS (4.11.0)
• AngularJS (1.3.8) with requireJS
• Zombie for generating pages for SEO
• hello.js (for social login)
• Gulp for task management

##Basic requirements for a site##

• Minimum number of http requests
• Single Page application in client side
• SEO support
• Logging - load my db queries, http requests received and error logs separately. This will be helpful for tracking
• CDN implementation - this is a common requirement for most of the projects. I have used Google Cloud storage as CDN for this project
• Configs for different environment
• Social Logins with regular signup/login

##What is included in this project##

• Server with nodeJS and expressjs framework. File: server.js
• MongoDB integration with Mongoose layer. File: app/utils/database.js
• Single Page application starter kit using AngularJS, RequireJS. File: public/res/js/appModule.js and public/res/js/appBootstrap.js
• SEO support by rendering the pages in server side using Zombie framework. Reference: Seo for Single Page Applications File: in server.js look for app_config.enableZombie
• r.js optimizer integration for whole project using gulp. File: build/build.js
• r.js support for CSS also using require-css. You can load CSS on demand for the pages are you are in, instead of loading all CSS.
• Google cloud storage CDN integration for static resources and dynamic assets like user uploaded images through gulp task. File: gulpfile.js
• Complete social Logins using hello.js in client side. File: public/res/js/app/pages/auth/authCtrl.js
• Environment specific configurations in config directory
• Separate logging for DB queries, http requests, error etc, using winston and morgan. File: app/utls/log.js
• JSONP support for data from server. File: server.js look for renderJson
• Auth check for client side routes. example: "Edit your Profile" page in the seed project. Reference: Protecting routes in AngularJS. File: public/res/js/routeResolve.js and public/res/js/appRoutes.js
• Dynamic meta content like page title, meta description, meta content for SEO. Reference: StackOverflow File: public/res/js/appModule.js and look for setMeta. Configuration is mentioned in public/res/js/appRoutes.js
• Session handling using MongoStore. File: server.js
• Global variables for client side templates like CDN url prefix for images, etc.. File: public/res/js/appModule.js and look for $rootScope.globals

##Steps to install##

• clone or download or fork this git repo
• Run npm install to install dependencies
• Run gulp task ./node_modules/gulp/bin/gulp.js This will build all necessary resources mentioned as in build/build.js and add it to dist directory.
• The above gulp task will also start the server through this command: node --debug server and display the IP address and port in which it is started. Optionally, you can use supervisor by uncommenting supervisor -i "public,dist,views" --debug server and commenting node --debug server in server task
• The above task will also listen for changes inside public folder and re builds the resources whenever there is a change. livereload is enabled along with this task.
• For checking SEO page(angularJS page rendered from server side), add ngserver=true to the page URL. ex: http://<ipaddress>:<port>/?ngserver=true. This will render html content of your root (/) page
• file uploads - also handles heavy compression logic using imagemin-jpeg-recompress for jpeg files. Page: \home

##How to add new page##

• add new directory inside public/res/app/pages ex: settings
• add controller, service, css, template files as needed inside this directory
• Add the new route in appRoutes.js, ex: /settings
• Add the new module inside build/build.js

###Production Deployment###

• In gulpfile.js we hav added optimizer=none in the task build. This will not minify the files when running the build for easy debugging during development. Remove this optimizer=none while doing production deployment to minify the files
• If you want to upload files to CDN, here I used Google Cloud storage, uncomment gulp.task('default', ['uploadJS', 'uploadCSS']); in gulpfile.js. Make sure you add necessary keys and bucket names in app.json configs. Running this task will upload CSS and JS files to the CDN bucket

###Coming soon###

• load combined view files instead of separate partials for each page
• Avoid adding logs to all folders. Currently logs are cumulatively added for lower levels. If log level is 5, all logs with levels < 4 will include logs of level 5. So it is getting duplicated.
• Control loading index.html for unhandled requests. Since I am using * in routes.js, if any the request is not handled, index.html will be loaded.
• Client side caching data using angular-cache
• samples for using bcrypt for password encryption, using mandrill API to send mail, newrelic implementation

###If SEO is not working###

• Add JS controller to build.js file. If you have imported css file in controller, SEO is not working