Using Tincr with ASP.NET MVC in Windows 7

If you’re not aware, tin.cr is an extension to Chrome that allows you to edit your JavaScript and CSS files in Chrome or using your editor of choice and affecting the source and destination. I personally wanted to use it to make modifications to JavaScript files in VS2012 and have Chrome auto load the file and put it into effect on the page. Thus I save myself numerous page refreshes while I work out kinks. Tincr was developed by Ryan Ackley. Here is the official video for Tincr.

Installing Tincr on Windows 7

1. Visit the tin.cr website.
   
2. Click on the Download Tincr button (Do this through chrome and it will take you to the chrome extension install page).
   
3. Once you have added the extension restart the browser and you should see a Tincr tab in the Developer Tools window<

Setup Tincr

1. We now need to create a tincr.json file. Open up your favorite editor and post the following code into it (remember to change MyApp to your app name):

   {
       “toFile” : [],
       “fromFile” :
       [
           {
               “from”: “\\\\Scripts\\\\([a-zA-Z]+)\\.js”,
               “to”: “/MyApp/Scripts/$1.js”
           }
       ]
   }

   This tincr.json file tells tincr to look for JavaScript files in the Scripts folder and apply that to the ‘to’ URL. Notice it is using regex so if you have funky named files, you will have to change the regex. In my case, the js file is called ‘common.js’. Once you are done, save the tincr.json file to the root directory. This will be the location of the ASP.NET MVC app directory that is hosted in IIS. In my case, it was C:\dev\tfs\MyApp.

2. Now you need to setup Tincr. You can mimic the options I set here. For Root Directory, you should point to the location of the ASP.NET MVC app directory that is hosted in IIS. In my case, it was c:\dev\tfs\MyApp. You should see the green ‘Project loaded successfully’ before you begin to use this.

Using Tincr

1. We are ready to test this out. Open a browser window and navigate to the URL. In my case it is http://localhost/MyApp. Now go into VS2012 and make a change to a JavaScript file. You should see a message in Dev Tools Console saying “Auto-Reloaded http://localhost/MyApp/Scripts/common.js”. In the case below, I had a console.log(‘asdf’) that I changed to ‘its alive’ in a jquery function that did something on hover. So I just saved the file in VS 2012, moved my mouse over the element and saw the new message. AWESOME!

Issues with Tincr

If you don’t see the Auto-Reloaded message, it means that your tincr.json file is incorrect OR the extension is not able to figure out your file. This is something that I struggled with for a little bit.

• The Extension has an issue with windows where query string parameters affixed to the JavaScript URL will make it fail.
• Another possible issue is if you have an AJAX request that downloads a JavaScript file because it’s a link in the content that was returned. Well, your URL for that JavaScript file may have been altered by JQuery. Use Fiddler and make sure that your URL for the file does not contain any query parameters. It will save you a bunch of time.

Happy Coding.

Advertisement