.NET backbone.js setup procedure - simnova/webdevdocs GitHub Wiki

Table of Contents Prerequisites Setup Procedure AT ROOT IN AREA COMMON Development Procedures Helpful Links:

1. Install NuGet
2. Install ASP.NET MVC 4 using web platform installer
3. Install Git : follow instructions here MachineSetup
4. Install node (even if you already have it installed, install again to ensure it is current).
   1. Clear your NPM cache (this may save some headaches):

      npm cache clean

   2. If behind a firewall, configure node to speak to the firewall by issueing the following commands:

      npm config set proxy http://domain%5Cusername:password@ipaddress:port

      npm config set https-proxy http://domain%5Cusername:password@ipaddress:port

   3. Install the following by typing the commands in a command prompt:
      1. Install yeoman (includes bower and grunt) :

         npm install -gq yo

      2. Install backbone generator :

         npm install -g yo grunt-cli bower karma

      3. Install styledocco :

         npm install -g styledocco

      4. Install yuidocs :

         npm -g install yuidocjs

   4. Ensure node is updated
      1. Update Node:

         npm update -g n

      2. Update Global Packages:

         npm update -g

5. Install ruby
   1. Select all of the following:
      1. Install Tcl/Tk supprt
      2. Add Ruby executables to your PATH
      3. Associate .rb and .rbw with this Ruby installation
   2. Install the following by typing the commands in a command prompt:
      1. Ensure Ruby is up to date: gem update --system
      2. Install Compass: gem install compass

1. Create New MVC4 Project
   1. Update all defalut libraries (EF/jquery/Modernizr/etc..)

1. Make a catchall root, this will allow your app to accept pushstate.

            routes.MapRoute(
                name: "CatchAll",
                url: "{*url}",
                defaults: new { controller = "Home", action = "Index" }

1. Navigate to Content Folder
   1. (see steps in common below)
2. Copy content from index.html to /home/index.cshtml
   1. put

      @{Layout = null;}

      at top of page
   2. prefix all references marked with 'target dummy' in document with /content/
   3. prefix all references marked with 'target release' in document with /content/dist/release/
   4. prefix all references marked with 'target debug' in document with /content/dist/debug/

If using Jasmine Unit tests:

1. Copy /content/app/config.js to /content/test/jasmine/config.js
   1. remove dependency on "main"
   2. update path to require.config to

      /content/vendor/jam/require.config.js

2. Modify /content/test/jasmine/index.html
   1. remove Application Libs comment and references to jquery/lodash/backbone
   2. update require src path to

      /content/vendor/js/libs/require.js

   3. update require data-main to

      ./config

   4. modify require path for spec to

      ../jasmine/spec

3. Browse to content/test/jasmine/ to confirm tests work
4. See COMMON section below:

(note this area is a work in progress)

1. Create Area
   1. Create folder in area, Content

(see steps in common below)

1. 1. edit content/app/app.js change

      root: "/"

      to include path to the directory
2. See COMMON section below:

1. 1. open folder in windows explorer
   2. navigate to folder in the command prompt
      1. issue command: yo bbb:app
         1. give your project a name (i.e: bbb)
         2. choose your test framework (i prefer Jasmine, but any will do)
         3. choose your spacing preference: (i prefer Spaces(2))
      2. issue command: bower install layoutmanager
         1. this may prompt you to chose between backbone 1.0.0 and 1.1, choose 1.1 and prefix selection with an exclamation mark '!'
      3. issue command: bbb debug
      4. issue command: bbb release
   3. Create file called "create_css_docs.bat" in the Content directory
      1. Add the following line in the batch file:

         styledocco -n "projectStyles" -o css_docs app\styles\

   4. Create file called "create_js_docs.bat" in the Content directory
      1. Add the following line in the batch file:

         yuidoc --outdir js_docs .

   5. navigate to root directory of solution, create file called "watch_sass_template.bat"
      1. Add the following lines in the batch file:
         cd %CD%\msbbb\Areas\Template\Content
         compass watch
      2. Copy the batch file and rename "Template" to match the area of the website you are working with.

1. CSS Editing
   1. Use StyleDocco for to create examples for styles
   2. Generate docs by clicking on CreateDocs.bat in the assets directory.
   3. Use SCSS / Compass where makes sense (currently used for sprites)
      1. Run ms-bbb\msbbb\watch_sass_msbbb.bat to watch for changes in SCSS files to automatically generate CSS
   4. When using bbb templates to edit styl css files, associate css syntax to styl files by : View -> Syntax -> Open all with current extension as --> CSS
2. Build Procedure
   1. Grunt is used for a handful of build activities: to run these, first open a node command prompt (start-->
   2. run BBB release or BBB debug from the Content folder and change references to output of those directories to have site reference compiled output.

• backbone.js - What we build our apps on
  • grunt-bbb - Build tasks for Backbone
  • backbone boilerplate - Nice framework for setting up backbone
• underscore.js - Handy utility
• compass - CSS Generation +++
• sass - CSS Generation
• styledocco - Stylesheet Documentation
• yuidocs - Javascript Documentation
• require.js - How we load scripts
• jasmine - How we test Javascript
• Backbone.JS Training in Chennai - Backbone.JS Training
• .Net Training in Chennai - .Net Training