Kaytee Frei

Web Developer

Hello there! I'm Kaytee Frei, a web developer located in Central WI. I have a broad range of web skills, but my true passion lies in creating simple and visually appealing experiences.


Stepping Into a New Era (Visual Studio 2015, MVC 6, etc)

If you haven't heard, Visual Studio 2015 RC has been released! Throughout this week I've had the chance to play around with all of the new features and try to get a project up and running that looks similar to our current product site using all of the latest and greatest. The notion of being able to use git, gulp, node, npm, bower, etc at my actual day job has up until now only been a seemingly far-fetched fantasy, one frequently thought of while merging a .csproj file or while wading through a bloated web.config file. However, with the release of ASP.NET 5 this dream has turned into an exciting reality!

Working on this proof of concept project has been a major learning experience for me. Although I had some minimal knowledge of things like node.js, bower and gulp, I had never really used them for anything practical before. There are already quite a few tutorials out there for ASP.NET 5, but picking it up this early means that things are still changing frequently, and if you run into a problem, chances are the solution will be hard to find (or will have changed by the time you run into it). There are also a lot of different moving parts in this new project structure, so setting up a project is a very different process. That being said, this post may become outdated quickly, but I still wanted to document some of the things I ran into this week.


Git Protocol

Visual Studio 2015 makes use of some modern tools to enhance package/dependecy management. Some "magic" happens when you add a reference to a package in your bower.json or package.json files. Under the covers it is using bower or npm to grab these packages from github for you. This is awesome. One problem you may run into though is that the git protocol port is blocked by your firewall (which is currently the problem I'm running into at the software company that I work at). This means that git://github.com/anything with fail, however, https://github.com/anything will work. To apply this change to all git commands, you can use the following command that will update your ~/.gitconfig file (type this into a command prompt or terminal at any location):
git config --global url."https://".insteadOf git://

-If you get a message similar to "'git' is not recognized as an internal or external command, operable program or batch file." you need to install git first.


node-sass/gulp-sass

We use Sass in our project so I looked for a gulp plugin that would compile our sass files for us. I found gulp-sass. I added "gulp-sass": "^2.0.0" to my package.json file and saved the file. When you save this file, Visual Studio runs the npm install command for you and, if successful, you should see your new package inside Dependencies > NPM. But after I tried to add gulp-sass, this is what I saw in my Solution Explorer:

Gulp not installed

And this is what I saw at the bottom of my output window:

npm WARN 'git config --get remote.origin.url' returned wrong result 
(git://github.com/am11/pangyp) 
npm ERR! git clone git://github.com/am11/pangyp Cloning into bare repository 
'C:\Users\***\AppData\Roaming\npm-cache\_git-remotes\git-github-com-am11-pangyp-9458b202'...
npm ERR! git clone git://github.com/am11/pangyp fatal: read error: Invalid argument
npm ERR! Error: Command failed: Cloning into bare repository 
'C:\Users\***\AppData\Roaming\npm-cache\_git-remotes\git-github-com-am11-pangyp-9458b202'...
npm ERR! fatal: read error: Invalid argument
npm ERR! 
npm ERR!     at ChildProcess.exithandler (child_process.js:648:15)
npm ERR!     at ChildProcess.emit (events.js:98:17)
npm ERR!     at maybeClose (child_process.js:756:16)
npm ERR!     at Process.ChildProcess._handle.onexit (child_process.js:823:5)
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!     <http://github.com/npm/npm/issues>
npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\
IDE\\Extensions\\Microsoft\\Web Tools\\External\\\\node\\node" "C:\\Program Files (x86)\\
Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\
External\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd C:\TFS12-***\***\
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code 128
npm

====npm command completed with exit code 1====

After quite a bit of digging around I figured it was maybe a problem with one of the gulp-sass dependencies, node-sass. I followed their troubleshooting tasks and then submitted an issue on github and shortly after was directed to apply a patch, which is something I don't know if I've ever done with git before now. Here are the steps I took to apply it:

  1. Open command prompt/terminal
  2. Use the cd command to navigate to the directory your project is in (this should be the path to where your package.json, project.json, etc files live similar to "C:\Users\[your username]\Documents\Visual Studio 2015\Projects\WebApplication2\src\WebApplication2") cd C:\Users\[your username]\Documents\Visual Studio 2015\Projects\WebApplication2\src\WebApplication2
  3. run this command: npm install git://github.com/saper/node-sass#notssh (or npm install https://github.com/saper/node-sass#notssh if you can't use the git protocol).

After node-sass successfully installed, I went back into Visual Studio, and this is what my Dependencies folder looked like:
node-sass installed

It still shows gulp-sass as not installed so I right-clicked on the NPM folder and then clicked Restore Packages. After that, gulp-sass no longer has "- not installed" next to it. Sweet, so now I should be able to add a gulp task in gulpfile.js. Following the basic usage example, I set up a task that will grab sass files from my "Assets/scss" folder and compile them into css files that get placed into the "wwwroot/css" folder.

var sass = require("gulp-sass");

gulp.task('sass', function () {
    gulp.src('Assets/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('wwwroot/css/site.css'));
});

Then, if you look in the Task Runner Explorer window (View > Other Windows > Task Runner Explorer) you should see your gulpfile.js file with the "sass" task under Tasks. If you see a message that says "Failed to load. See output window (Ctrl+Alt+O) for more information.", gulp-sass may be referencing the wrong version of node-sass (not the patched version). Remove "gulp-sass": "^2.0.0" from your package.json file, save the file, right click gulp-sass in your NPM folder (in the Solution Explorer) and click Uninstall Package. Then re-add "gulp-sass": "^2.0.0" to your package.json file and this should fix your gulpfile.js error.


Just Google It

A lot of the documentation out there right now leads you to the www.asp.net website, but I have never had much luck with their site. For example, TagHelpers are one of their biggest new features, however searching "TagHelpers" on their site returns NO RESULTS... Searching "Tag Helpers" does return results, however the latest post/article is from October 2014 (and the results are pretty irrelevant). WAY old considering all the changes that have been happening. Disclaimer: I like to point out their terrible search experience every chance I get in hopes that they'll improve it someday.


That's all for now, though I'm sure I'll run into more in the coming weeks!

comments powered by Disqus