Modern Web Development Tools in Visual Studio 2015 with Mads Kristensen

Download this episode

Download Video

Download captions

Description

Join your guide Cory Fowler as he talks to the product teams in Redmond as well as the web community.

This week Cory is joined by Mads Kristensen from the ASP.NET Web Tooling Team to talk about the improvements for Modern Web Development in Visual Studio 2015 including Bower, Grunt, Gulp, LESSSass and npm. Mads also explains how to use the new Task Runner Explorer to harness the power of these tools from within Visual Studio.

Show Links


Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      Alex Reid

      I would like to invite a few web coders to be in on the ground floor as we transmute our Ning network group to better platform, ready for a new web hosting. I don't have much experience with any dotnet stuff, HTML or java so I will pretty much have to relay on your guys expertise. The project is continuing to grow and there's a strong chance it will go viral within a year or 2. The site is currently here >> http://savetheworldfree.ning.com it has groups members profiles and forum discussions. Who has any suggestions for us?

    • User profile image
      Hans Schenker

      Visual Studio 2013 Update 4 has already:
      Task Runner Explorer for Visual Studio 2013
      Bower, Grunt, Gulp & npm Package Intellisense for Visual Studio 2013
      installed. (no need to download)

    • User profile image
      Uriil

      Looks like Microsoft goes away from Optimization Framework in direction of publicly used solution

    • User profile image
      Piotr Spikowski

      I can see it is possible to bind grunt tasks to specific Visual Studio events (after build, before build etc.). I just wonder how to relate all those grunt tasks into selected solution configurations. For example: if I request a Debug build I would like to run specific (debug) grunt task (reacting on the VS after build event). If run a Release build I want to run release grunt tasks (reacting on the same ‘after build’ VS event).

    • User profile image
      Mads Kristensen

      @Piotr,

      We haven't implemented that yet, but it's on the backlog to add support for binding to all the VS configuration.

    • User profile image
      Mads Kristensen

      @Hans,

      Visual Studio 2013 Update 4 does not include the Task Runner Explorer nor the Package Intellisense extension. They are separate downloads you manually have to install.

    • User profile image
      scyonx

      Being able to use your already installed node tools is a big win for me.

       

      I'd love to see another episode on SchemaStore

    • User profile image
      tarkus

      One one hand you clearly make progress, on the other hand you spend time on implementing non-critical web dev related features, but neglect major updates to IDE which prevent it from being used by front-end developers.

      Like, for example, JSX support. There is currently 5'000 downloads of React.js library per day (from npmjs.org). It's mega popular. But developers can't use it with Visual Studio IDE because Visual Studio lacks JSX support (when you open a React component in Visual Studio, it highlights all the lines as errors). This is the most requested feature on UserVoice, but no any updates on implementing this feature were published for months.

      Or, another issue with, is that Visual Studio forcing you to have a pre-defined project / solution structure. But would be nice, if I could just open a regular front-end project and don't need to tweak anything and Visual Studio (as simple as: File -> Project -> Open from a directory). Try to open this project in Visual Studio: React.js Starter Kit

    • User profile image
      Mads Kristensen

      @Tarkus,

      JSX support is coming, but we haven't started on it yet. We've done the initial architecture and know how to add the support, now we just need some time to implement it. I can't make any guarantees that it will make it in to VS2015 RTM, but I hope it will.

      You can open folder based websites by doing File -> Open Website. It's a directory based project system that doesn't require any project files.

    • User profile image
      OzBobWa

      Note: to write (for example) an AngularJs App starting from the Empty AspNet 5 project type, you should right click on the Project File and choose 'add Grunt and Bower'

      I recommend also reading:

      http://blogs.msdn.com/b/webdev/archive/2014/12/17/yeoman-generators-for-asp-net-vnext.aspx

      I am not sure where to run Node / PowerShell from within VS2015Pre - so that I can run the Yo commands.  Suggestions?

    • User profile image
      Mads Kristensen

      @OzBobWa, Web Essentials 2015 has this exact feature that adds Grunt and Bower to any web project. Just right-click the project node in Solution Explorer and go to Add... -> Grunt and Bower.

      You should be able to use the Package Manager Console to execute yo commands. We'll also add a Open PowerShell Here feature to the Task Runner Explorer to make it easy to get to Powershell at the right path.

    • User profile image
      Aluan

      Great video. Very helpful in understanding the roles and uses of the various components of the new Visual Studio web tooling experience. Lots of helpful examples.

    • User profile image
      AceHack

      I have not seen any videos on how to take errors from grunt and redirect into the ui.  For instance if I were compiling less or some other type of file I would like to show errors in the vs error window and be able to double click to take me to the failing line of code.  Thanks.

    • User profile image
      Xtianus

      I need to be able to accomplish this:

      https://www.npmjs.com/package/generator-zf5

       

      is there anyway to accomplish this? 

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.