Skip to content

README.md

Latest commit

 

History

History
78 lines (60 loc) · 6.03 KB

README.md

File metadata and controls

78 lines (60 loc) · 6.03 KB

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