Deployment in Visual Studio

[Elior Tirosh]

Hi,

Can Some one please explain what to do in order to deploy a Durandal based app in Visual Studio?  The explanation here is too short for me, e.g. I could not figure out how to create the 'main-built.js' file.

Thanks,

Elior

[David Parker]

I just use grunt.    console   grunt  test-build    and grunt build.    this moves everything into a build folder and I then FTP that up onto azure.

you will need NPM installed,   you will / may have to change paths etc.  but here is mine.   it will check it, combine, minify, uglify and create a single JS file

/*global module, require */


module.exports = function(grunt) {
    'use strict';


    var mixIn = require('mout/object/mixIn');
    var requireConfig = {
        baseUrl: 'app/',
        paths: require('./requirejs-config').paths
    };
    var processFiles = {
        files: {
            'build/index.html': ['index.html'],
            'build/login.html': ['login.html']
        }
    };


    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),


        processhtml: {


            options: {
                strip: true
            },


            realBuild: processFiles,
            testBuild: processFiles
        },


        clean: {
            build: ['build/*', 'app/main-built.js']
        },


        replace: {
            build: {
                options: {
                    patterns: [
                        { match : 'timestamp', replacement : '<%= grunt.template.today("yyyymmddHHMMss") %>'}
                    ]
                },
                files: [
                  { expand: true, flatten: true, src: ['app.manifest', 'web.config', 'favicon.ico', 'requirejs-config.js'], dest: 'build/' },
                  { expand: true, flatten: true, src: ['build/index.html'], dest: 'build/' },
                  { expand: true, flatten: true, src: ['build/login.html'], dest: 'build/' }
                ]
            }
        },


        jshint: {
            all: ['app/**/*.js']
        },


        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> (<%= pkg.version %>) <%= grunt.template.today("yyyy-mm-dd hh:mm") %> \n' +
                    '* Copyright (c) <%= grunt.template.today("yyyy") %> Your Company \n' +
                    '* Author/s: Davethecoder */\n'
            },
            build: {
                src: 'build/main.js',
                dest: 'build/main.js'
            },
            login: {
                src: 'build/login.js',
                dest: 'build/login.js'
            }
        },


        durandal: {
            main: {
                src: ['app/**/*.*', 'bower_components/durandal/**/*.js','!app/main-built.js','lib/durandal-plugins/**/*.js'],
                options: {
                    name: '../lib/require/almond-custom',
                    baseUrl: requireConfig.baseUrl,
                    mainPath: 'app/main',
                    paths: mixIn({}, requireConfig.paths, { 'almond': '../lib/require/almond-custom.js' }),
                    exclude: [],
                    optimize: 'none',
                    out: 'build/main.js'
                }
            }
        },


        requirejs: {
            login: {
                options: {
                    baseUrl: 'app/',
                    mainConfigFile: 'app/login/main.js',
                    paths: requireConfig.paths,
                    include: 'login/main',
                    name: '../lib/require/almond-custom',
                    out: 'build/login.js',
                    optimize: 'none',
                    exclude: []
                }
            }
        }
    });


    grunt.loadNpmTasks('grunt-processhtml');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-requirejs');
    grunt.loadNpmTasks('grunt-durandal');
    grunt.loadNpmTasks('grunt-rename');
    grunt.loadNpmTasks('grunt-replace');


    grunt.registerTask('beforeProcess', ['jshint', 'clean:build']);
    grunt.registerTask('afterProcess', ['replace:build', 'durandal:main', 'requirejs:login']);
    grunt.registerTask('buildAfterProcess', ['afterProcess', 'uglify:build', 'uglify:login']);


    grunt.registerTask('default', ['beforeProcess', 'processhtml:testBuild', 'afterProcess']);
    grunt.registerTask('default-with-real-api', ['beforeProcess', 'processhtml:realBuild', 'afterProcess']);


    grunt.registerTask('build', ['beforeProcess', 'processhtml:realBuild', 'buildAfterProcess']);
    grunt.registerTask('test-build', ['beforeProcess', 'processhtml:testBuild', 'buildAfterProcess']);
};

Hope it helps

[David Parker]

extra info:   http://blog.teamtreehouse.com/install-node-js-npm-windows

grunt etc they are node packages   ( npm ).    install node on your windows box.    once installed.   On the main root of your application add a file called

packages.json   ( this is like a nuget packages file ) and NPM is like nuget.

{

  "name": "Software-name-no-spaces",

  "version": "1.0.0-RC",

  "description": "any type of description u like",

  "main": "app/main.js",

  "scripts": {

    "test": "grunt jasmine:dev"

  },

  "keywords": [

    "Durandal",

    "Grunt",

    "Jasmine"

  ],

  "author": "yourname",

  "license": "MIT",

  "devDependencies": {

    "connect-livereload": "~0.3.0",

    "cors-anywhere": "^0.2.3",

    "express": "^4.13.0",

    "grunt": "~0.4.1",

    "grunt-contrib-clean": "~0.5.0",

    "grunt-contrib-connect": "~0.5.0",

    "grunt-contrib-copy": "~0.4.1",

    "grunt-contrib-jasmine": "~0.5.2",

    "grunt-contrib-jshint": "~0.6.4",

    "grunt-contrib-requirejs": "^0.4.4",

    "grunt-contrib-uglify": "~0.2.4",

    "grunt-contrib-watch": "~0.5.3",

    "grunt-durandal": "~0.1.2",

    "grunt-open": "~0.2.0",

    "grunt-processhtml": "^0.3.7",

    "grunt-rename": "^0.1.4",

    "grunt-replace": "^0.8.0",

    "grunt-template-jasmine-requirejs": "~0.1.7",

    "htmlprocessor": "^0.1.10",

    "mout": "~0.7.1"

  }

}

Use the above content for your file.    then in command prompt go to your root folder for application

and type in npm install.

this will read the file and install required packages.     add these folders to your git.ignore file

like you would for nuget folders.

You can then type   grunt, or grunt build  or grunt test-build.

test build wont be much use to you, unless you add things like this to your code:

<!-- build:remove:realBuild -->

    <style>

      .sidebar-collapse{ background-color:black!important; color:red!important}

      .nav>li>a { font-weight: normal!important; color: green!important}

    </style>

    <!-- /build -->

As above, for a release the CSS is normal,  for test builds i change the colour of links so people know they 

are on the test system, and not a live version.

Hope this helps even more

On Tuesday, 1 December 2015 07:32:11 UTC, Elior Tirosh wrote:

[Elior Tirosh]

Thank you very much for all your help !  I'll slowly go through this and report back :-)

בתאריך יום חמישי, 3 בדצמבר 2015 בשעה 17:31:21 UTC+2, מאת David Parker: