Live reload browser, when you save a JavaScript, CSS or HTML file in Visual Studio 2013, by using BrowserSync or BrowserLink

 

If you want to speed up your SPA development process, it would be nice if you could reload all browser currently showing your SPA, when you press CTRL-S in Visual Studio 2013. The build-in Browserlink provides this feature for ASP .NET WebForms en ASP .NET MVC, but you could also use BrowserSync, which will work with any editor.

 

BrowserSync

 

1. Download node.js http://nodejs.org/download/

2. Install node.js (next – next – finish)

3. Open a command prompt (with administrator privileges) and enter:

4. npm install -g browser-sync

5. Change directory to the location of your Visual Studio solution file:

    – CD “C:\Projects\MyProject”

5. Start your web application in Visual Studio by pressing F5

    – Look at the browser address bar to get the URL to connect BrowserSync to, in my case localhost:50367

6. To start watching all files in all subfolders, at the command prompt enter:

    browser-sync start –proxy "localhost:50367" –files "**.*"

 

This will start a new instance of the default browser on an other port, showing your site connected to BrowserSync

In my case the new url was: http://localhost:3000/

Now when you edit a file in Visual Studio en press CTRL-S the browser at http://localhost:3000 will be refreshed.

 

BrowserLink

BrowserLink is provided in the box with Microsoft Visual Studio 2013, but OOB it will not work with SPA applications created with only html, JavaScript and CSS files.

To get BrowserLink working with those kind of web applications add the following to the web.config:

<system.webServer>
    <handlers>
            <add name="Browser Link for HTML" path="*.html" verb="*"
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>

The good thing about BrowserLink that it is in the box and you don’t have to specify all subfolders you want to watch.

The downside is that you still have to use CTRL-S and CTRL-ALT-ENTER. This can be an upside if you want to edit multiple files en then refresh the connected browsers.

For now I will stick with BrowserLink, because it’s in the box.

 

Note: when using the “empty” asp .net template, I could not get BrowserLink to work, but when I used the web api template all was just fine.

Changing C# on the fly (without stopping the debugger) in an ASP .NET vNext web application with Visual Studio 14 CTP3

The roslyn compiler found in Visual Studio 14 enables us, to adjust C# code during runtime, by compiling the new C# code in-memory. Now we can edit the UI part (HTML, CSS, JavaScript) of a single page app, including the backend C# ASP .NET Web Api service dynamically in runtime.

 

On of the things, that disrupts my workflow, when creating a single page app with AngularJS, backed by a web api C# service in Visual Studio 2013, is the fact that, when I find a bug in my C# code while testing the UI, I have to stop the debugger, adjust the web api C# code, re-compile, re-run and then recreating state in the web app before I can resume testing the UI.

This pain will go away, when using Visual Studio 14

 

Download and install Visual Studio 14 CTP 3 from http://msdn.microsoft.com/en-US/subscriptions/downloads/

Open Visual Studio, choose File > New > Project …

 

image

 

image

 

Start the web application by pressing CTRL + F5 (so don’t start the debugger).

 

image

 

Click on the Contact page in the browser:

You will see the text “Your contact page”.

image

 

Now go to the Controllers\HomeController.cs

image

 

Adjust the the C# code: ViewBag.Message = "Your contact page.";

to

ViewBag.Message = "My contact page.";

 

image

 

Save the file and in the browser press F5, you might see a short delay, because the roslyn compiler is now dynamically compiling the code.

 

The C# code is changed without disrupting my workflow.

 

image

Fix: Visual Studio 2013 keeps on crashing after installation of Multi-Device Hybrid Apps (Preview)

After I installed: http://msdn.microsoft.com/en-us/vstudio/dn722381.aspx.

Visual Studio 2013 would keep on crashing when opening a Multi-Device Hybrid Apps project.

I found the fix at: http://stackoverflow.com/questions/24404132/visual-studio-crashes-every-time-a-project-is-opened

 

Go to Tools > Options > Extensions and Updates > Add Web Essentials Nightly builds:

image

 

Then go to Tools > Extensions and Updates… (install the latest Web Essentials build)

image

 

I also updated to the latest version of the Windows Phone emulator, but I don’t think that is necessary.

 

 

Running a cordova AngularJS app from Visual Studio 2013 in the ripple:

 

image

 

Running app in the Android emulator from Visual Studio 2013:

 

Listing all available AVD’s

C:\Users\Roel\AppData\Local\Android\android-sdk\tools>android list targets

Creating a AVD

C:\Users\Roel\AppData\Local\Android\android-sdk\tools>android create avd -n rli_
_4__android_4.4.2 -t 4

 

image

 

Note: first time launch of the emulator might take a while in my case (2 minutes staring at a black screen with android logo on it Winking smile)

NuGet Package Manager menu items not showing in Visual Studio 2012.

I had installed Visual Studio 2010 and Visual Studio 2012 and installed the NuGet Package Manager, via [Extensions and Updates] and no NuGet Package Manager was showing.

I found the solution add: http://nuget.codeplex.com/workitem/3031

 

Manual downloading the NuGet Package Manager (vsix), closing all visual studio instances and running the *.vsix twice simultaneous, fixed the problem.

Show SSIS project parameters in Visual Studio 2012

In SSIS 2012 there are two scopes on which parameters can be defined:

– project

– package

 

Projects parameters

If you want to show / edit SSIS project parameters in Visual Studio 2012:

Open the solution explorer and under the project, there’s a folder [Poject.params]:

Clicking on the folder [Poject.params] will show the project parameters.

image

 

Package parameters

If you want to show the packages parameters, open the package and click on the Parameters tab:

image

CSS / HTML / JavaScript / C# Code Snippets in Visual Studio 2013

Just a reminder: Visual Studio contains code snippets for many different “languages”, like CSS, HTML, JavaScript, C# etc.

When you want to write a for loop in JavaScript, just hit CTRL + SPACE, then type for, then press the TAB twice and a for loop will be inserted:

 

Before

image

CTRL + SPACE

image

for

image

TAB + TAB

image

 

Edit

This snippet can be found in the folder:

C:\Program Files (x86)\Microsoft Visual Studio 12.0\\JavaScript\Snippets\1033\JavaScript

image

For example, by editing the for.snippet you can change it, so the generated for loop adheres to the JSHint rules:

(note: open Notepad.exe as administrator, else the snippet files can’t be edited.)

Now I changed the for.snippet to:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>for</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>for</Shortcut>
    <Description>Code snippet for a for loop</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>index</ID>
        <ToolTip>Index</ToolTip>
        <Default>i</Default>
      </Literal>
      <Literal>
        <ID>data</ID>
        <ToolTip>Array object</ToolTip>
        <Default>data</Default>
      </Literal>
    </Declarations>
    <Code Language="JavaScript"><![CDATA[for (var $index$ = 0, len = $data$.length; $index$ < len; $index$+=1) {
    $selected$$end$
}]]></Code>
  </Snippet>
</CodeSnippet>

 

Now when I insert the for snippet the following code is generated:

image

 

Manage

To manage Code Snippets just hit CTRL + K, CTRL + B in Visual Studio or menu > TOOLS > Code Snippets Manager…

image

Fix: JSCS: The requireLeftStickedOperators rule is no longer supported.

After an update of web essentials I was getting the error:

23-6-2014 08:02:04: JSCS: vctmp6788_81613.js compilation failed: JSCS: The requireLeftStickedOperators rule is no longer supported.
Please use the following rules instead:

disallowSpaceBeforeBinaryOperators
disallowSpaceBeforePostfixUnaryOperators
disallowSpacesInConditionalExpression

 

 

To fix this just edit the global JSCS settings file in Visual Studio 2013:

image

 

Then remove the line: "requireLeftStickedOperators": [","],

 

{
    "requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],
    "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
    "disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
    "disallowRightStickedOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
    "requireRightStickedOperators": ["!"],
    "requireLeftStickedOperators": [","],
    "disallowImplicitTypeConversion": ["string"],
    "disallowKeywords": ["with"],
    "disallowMultipleLineBreaks": true,
    "disallowKeywordsOnNewLine": ["else"],
    "excludeFiles": [],
    "validateJSDoc": {
        "checkParamNames": true,
        "requireParamTypes": true
    }
}

Solving: Unable to perform operation on … The item … is locked in workspace … in Visual Studio 2012

 

I wanted to check-in a file, that was check-out by myself on an other pc.

 

You can revert those changes by using the tf.exe.

Open a command prompt AS ADMINISTRATOR

cd "C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE"

tf undo /workspace:"MYPC;MYDOMAIN\rlisdonk" /collection:http://1.1.1.1:8080/tfs/MyCollection $/MyProduct/Main/Source/MyProject/Staging.cs

Note: Spaces in Visual Studio project folder names will be converted to underscores ("_") in embeded resouce name, but spaces in filenames not.

 

If you have an embedded resource file, like:

 

image

 

The embedded resource filename will be:

 

Research.UnitTests.Folder_path_with_spaces.Text file with spaces.txt

 

The spaces in the foldername will be replaced by underscores (“_”), see Folder_path_with_spaces .

But the filename will contain spaces, see Text file with spaces.txt

Solving GitHub FetchHead (MergeConflict) in Visual Studio 2013

I was getting the error:

An error occurred. Detailed message: An error was raised by libgit2. Category = FetchHead (MergeConflict).
3 conflicts prevent checkout.

 

 

image

 

To resolve this problem, I installed the 3rd-party Git command prompt tools, then you can open a Windows git command prompt from Visual Studio 2013: http://msdn.microsoft.com/en-us/library/vstudio/dd286572.aspx#commands

 

image

 

When I entered the command: git pull, I got the real error cause:

 

image

 

After removing these files and entering the commands:

git stash

git pull

The error was resolved.