VS 201x - How do downloaded Bower .js files get deployed? - asp.net

Waffle
I've now been trying to automate and sort out a VS2013, not vNext, ASP.NET MVC project that started life as a front-end project on a Mac by a digital agency!
Aside: I've not yet used VS 2015, or ASP.NET vNext.
It uses npm, grunt and bower but not in the new VS 2015 template project way. We have to manually install the CLI tools and invoke it all manually, and it fails behind our proxy.
No one really understands this stuff or has the appetite to really tackle the problem. We copy files from a share to fudge it into working. It's a mess.
My Question
One of the things that's completely baffling me is how the dynamically-downloaded JavaScript files, via Bower, can be deployed via MSDeploy.
When a deployment package ZIP is created, it only includes content files declared the .csproj file.
In VS2015 there some kind of mechanism that auto-adds the downloaded Bower packages to the project?
Or some other trick?
Is there something that'll do this for VS 2013?

Not exclusive to Visual Studio 2015, but part of the ASP.NET 5 tooling. You can add an array of "prepublish" commands to your project.json that basically become part of the build/publish pipeline. Therefore, ensuring that Gulp, Bower or NPM commands can be run before the MSDeploy publish happens and are ready to be picked up by MSDeploy for publishing.
Reference:
http://docs.asp.net/en/latest/dnx/projects.html#publishing

Related

Update Css/Js bundles (Visual Studio Bundler Minifier) from the command line

I am in the process of creating automated update scripts for my websites. All websites are built using WebForms in Visual Studio 2017 (Not Core).
What I want to do is run a command line calling the bundlerconfig.json to update bundles for a certain project.
From what I can see there is a way using dotnet bundle, but I think this is just for DotNet Core projects.
Would be good to know either way whether this is possible or not. Thanks in advance.

Moving from Bower to Yarn asp.net Core 1.1 visual studio 2017

I took over a ASP.NET CORE 1.1 project which was using bower and gulp that's hosted on azure web app. Since bower is discontinued I decided to move to yarn.
I got Yarn installed after and moving bower.json items to package.json I thought all would be fine. I noticed the js files downloaded goes into node_modules not in wwwroot/lib folder. I think I need to use gulp to build the library and dist folders. But I am pretty much stuck at this point.
Also started getting this:
The JavaScript language service has been disabled for the following project(s): projectname\tsconfig.
Added tsconfig.json with suggested code in it, but it didn't solve the problem. I got the project working by grabbing copy of wwwroot from server.
But need to solve these issues.

Ubuntu dnu restore scripts

I've got a problem with 'dnu restore' command in Ubuntu 15 trying to build an ASP.NET 5 application. If I add SignalR to dependencies in project.json, no JS scripts are added to my project directory. Visual Studio Code continues asking me to restore packages. The same situation with jQuery (yes, I know it's better to use Bower for it's installation). I've tried running command with '--no-cache' parameter and adding SignalR-Client dependency, but scripts are still not added. It seems like Server-side libs are installed successfully (project builds and runs when I inherit from SignalR Hub class, the only problem VS Code does not recognize installed namespaces and classes). Is it possible to fix it or should I manually download JS files?
I've found the reason. ASP.NET 5 packaging system is new for me so I didn't know how to use it properly. DNX doesn't know how to install client libraries at all. It places all the installed packages into a special directory shared by all projects. In order to install client packages Bower should be used (it is easy to add - just add a dependency in project.json and create a configuration file). By the way SignalR has it's own Bower package as well as jQuery (but this is obvious).

Configuring existing ASP.NET project for DNVM, DNX environment on a Mac

I have an ASP.NET Web API project created on Windows using Visual Studio. How can I set this up for use with DNX/DNVM (on a Mac)?
Switching to Git solved the source control compatibility with TFS. But I wasn't able to find references to getting a project working across both these development environments.
I'm assuming as a first step the project will have to be migrated to ASP.NET 5/vNext but wondering other problems lurk around the corner with different project members using different environments.
I get an error when I run - git:(master):dnx . kestrel
As you mentioned yes you will have to migrate any namespace changes. I have a project that is developed across both. Also changing csproj files to xproj. Support is coming for some kind of interop between the different project types but its not here yet.
For build, publish, deploy from git without relying on VS publish capabilities or MSBuild you can follow my blog post here.
Basically you use DNU to publish and then kudu to deploy.

How to use nuget package in ASP.NET vNext?

I am giving asp.net vNext a go and have created a new project. I wanted to pull in some dependencies and used NuGet as I usually would. I used it to pull in Require.js for example.
I now have a reference to this under ASP.NET 5.0 in the project references and I can see the path to where it is on my drive from the properties (myUserDrive/.kpm/packages/require... blah)
My question is, how do I use this? - historically it would have added the code to my web project.
For clientside libraries you should now use Bower. The latest previews of Visual Studio 2015 have built in support for NodeJS' NPM packages and Bower packages. It's a bit more complicated but together with Grunt you can do some pretty cool stuff.
Bower has a lot more libraries than NuGet and is more up to date.
For a good intro on all the new things in ASP.NET 5 I advise you to watch these videos on Channel 9: http://channel9.msdn.com/Series/Whats-New-with-ASPNET-5
The second video talks about NPM and Bower packages.
Bower: http://bower.io/ -> Search Packages
Visual Studio 2015 is allowing users to take advantage of popular open-source package management and build tools for processing client-side resources. They suggest using NuGet primarily for managing .NET packages.
The recommendations are:
Package Managers: NPM and Bower
NPM
Use Node Package Manager to install and manage build tools and plugins to compile source into client-side optimized files. NPM files are stored in "node_modules" (hidden in the VS project).
Configured using "packages.json".
Bower
Use the bower package manager to install and manage client libraries like "bootstrap", "jQuery", "angularjs". Bower files are stored in a folder named "bower_components" (hidden in VS project).
Configured using "bower.json".
Build Tools: GruntJS and GulpJS
Grunt
Grunt is a javascript task runner which allows you to setup build tasks to process your source into client-side ready resources. Use NPM to install grunt plugins that allow you to compose tasks (such as processing LESS or coffee files or minifying js and css).
Configured through "gruntfile.js".
Gulp
Gulp is a "streaming build system". Similar to grunt but allows more advanced streaming tasks to be defined. Use NPM to install gulp plugins that allow you to compose tasks (such as processing LESS or coffee files or minifying js and css).
Configured through "gulpfile.js".
Visual Studio 2015 provides some built-in support for these tools, including autocomplete for package names and version numbers. Visual Studio will check to make sure your packages are installed and up-to-date when you open the project. Finally there is the "Task Runner" UI which allows you to run grunt or gulp tasks manually or configure them to trigger on certain events.
This following post gives an introductory step by step guide to using these tools in Visual Studio 2015. Beyond that you should be able to search on NPM, Bower, Gruntjs or Gulpjs to find intro videos or blog posts to help you become more familiar with each.
http://www.asp.net/vnext/overview/aspnet-vnext/grunt-and-bower-in-visual-studio-2015

Resources