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
Related
I know that Bower is not recommended to be used with ASP.Net Core 2.0. Instead, I used NuGet to download Bootstrap dependency into my project. Therefore, I can't reference the files in my Layout view like I used to do with Bower using:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
I am trying to use NuGet to get a cleaner code. However, I can't seem to be able to reference this package in my project. Anyone has an idea how to use/reference bootstrap installed through NuGet in an ASP.Net Core 2.0 application?
In .NET Core, Nuget is no longer suitable for deploying client files. This was a design decision made by Microsoft. Instead, you can use any of a host of client build/deploy tools like npm, or my preference is to simply link to the libraries you need st a CDN location. This eliminates deployment issues and offers better performance for your users.
In Visual Studio 2017 Preview, you can use Library Manager:
Library Manager (“LibMan” for short) is Visual Studio’s experimental
client-side library acquisition tool. It provides a lightweight,
simple mechanism that helps users find and fetch library files from an
external source (such as CDNJS) and place them in your project.
Soon it will available in VS stable version.
Add the "Package Installer" and "Bundler & Minifier" Extensions into Visual Studio (both created by Mads Kristensen)
Use the Package Installer to install client libraries using "npm" which is widely supported.
This downloads the files to a node_modules folder in the root of your web project.
Use Bundler & Minifier to copy/bundle/minify as you like for dev and/ or production from the node_modules folder to where you want them in the wwwroot folder.
First, install a nmp configuration file, and add bootstrap like in bower.json and save. Visual studio will download it. This is available for all packages. You can find the installed packages in the nmp node under the dependencies node of your project. Find more informations here
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.
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
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).
I am using bower.json to install dependencies for an Apache Cordova app created from Visual Studio and was wondering if it is possible to run a pre build task somehow in VS 2015 using the new task runner explorer (or another way) to copy just the minified files from bower_components to www\scripts or if my only option is what is listed here?
If it is possible using gulp, please let me know how starting form the blank Cordova app VS template.
The Visual Studio guidance for using NuGet with Cordova projects actually has something that may help here. That document includes a note about how to setup a before_prepare hook to copy NuGet files into the www folder when building. In Cordova before_prepare is one hook into the build process that is similar to a Pre Build task.