10

Is it possible in grunt to watch files and automatically reload a ASP.net MVC web application. Or does livereload only work with files served through grunt. I have come across grunt plugin 'grunt-iisexpress' but not really sure if I can use it, in conjunction with tasks to reload a ASP.net MVC webapp when a file has changed.

I do not have any index.html as a starting page in my web app but _ViewStart.cshtml which kicks off the whole application.

Infinite Recursion
  • 6,511
  • 28
  • 39
  • 51
nimgrg
  • 582
  • 1
  • 7
  • 17

2 Answers2

9

It is possible. I just got live-reloading in my ASP.NET app using grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch). It only took a few minutes.

I used this article as a guide: http://www.aliirz.com/javascript/2013/12/25/Live-Reload-with-Grunt/.

Do this via a command prompt in the ASP.NET app's folder.

1. Install grunt-contrib-watch

If you don't yet have a package.json file and want to save your dependencies in one: 

npm init

Then add Grunt and grunt-contrib-watch to your project:

npm install --save-dev  grunt grunt-contrib-watch

2. Configure Grunt

Next create a Gruntfile.js in that same folder. Here's mine:

  'use strict';
  module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.initConfig({
      watch: {
        views: {
          files: [
              'Views/**/*.cshtml', 
              'Scripts/**/*.js',
              'Content/**/*.css',
              'Content/images/**/*',            
              'bin/**/*.dll'
          ],
          options: {
            livereload: true,
          }
        }
      }
    });
  }

3. Run live reload server

Run your live-reload server alongside your ASP.NET app:

grunt watch

4. Add Snippet to ASP.NET

Finally, to enable it in your ASP.NET app, simply add the live-reload snippet to your Layouts and/or Views:

<script src="http://localhost:35729/livereload.js"></script>
Winston Fassett
  • 3,500
  • 3
  • 36
  • 29
  • Could you provide a little more detail on here? I want to try and set this up but being fairly unfamiliar with LiveReload and Node I'm not sure how to follow these instructions. When I tried it looked like I was creating a branch of a GIT repository or similar? – Ian Jul 07 '14 at 14:37
  • @Winston i don't understand where http://localhost:35729/livereload.js comes from ? do i need to take it from grunt-contrib-watch under my node-modules ? – eran otzap May 02 '16 at 08:20
  • @eranotzap 35729 is a default port where livereload server runs. If you want to specify any other port you should specify port number in options e.g. options: { livereload: 4455} this will start livereload server on port 4455 and you need to include in Layouts.cshtml file. – user2243747 Apr 25 '17 at 08:10
3

I came across this generator for mvc : https://github.com/has606/generator-aspnetmvc Perhaps you could do something like the grunt file in the project :

livereload: {
    options: {livereload: 32684},
    files: [
      '<%%= yeoman.app %>/Content/**/*.css',
      '<%%= yeoman.app %>/Scripts/**/*',
      '<%%= yeoman.app %>/Content/images/**/*',
      '<%%= yeoman.app %>/Views/**/*.cshtml',
      '<%%= yeoman.app %>/bin/**/*.dll'
    ]
  }

So any changes to views or compilation, reloads the site

user600314
  • 662
  • 1
  • 5
  • 17