I'm a total novice to npm, or really any package managers.
I'm working on a ASP MVC project within Visual Studio, and I have npm and bower installed globally on my computer.
I'm trying to use the bootstrap-material-design package in my project.
I manually created a package.json file using Visual Studio.
I opened a CLI at the project root and ran npm install -S bootstrap-material-design. That created a folder node_modules at project root, with bootstrap-material-design inside. I've included these folders in my project. It also changed my package.json file. Now, it looks like this:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {},
"dependencies": {
"bootstrap-material-design": "^0.5.10"
}
}
It appears to me that the package is "included" in my project. But my question is: how do I use it? All the npm guides I've been reading seem to suggest I can just start using the package in my javascript code and Visual Studio will somehow know that I'm trying to use to the package. But bootstrap-material-design has CSS files and JS files it needs included on every page. Where do those folders get included? In _Layout.cshtml? I'm pretty stuck.
Thank you!
Related
UPDATE:
Visual Studio - File - New - Project
- ASP.NET Core Web Application (.NET Core) - Web Application
I left the default name WebApplication1
expand the wwwroot folder
expand up to wwwroot/lib/jquery-validation
in the jquery-validation folder we can see this (see img below)
- right click the WebApplication1 project in the src folder
- click on Manage Bower Packages
- Bower Package Manager screen asking to update jquery and jquery-validation (see img below)
clicked Update jquery
**everything looks normal (see img below)
clicked Update jquery-validation
dist folder has disappeared (see img below)
The text below is before I UPDATED this Q
I created an empty ASP.NET Core MVC web application in VS2015CE.
I added the bower.json file, that manages client-side stuff of the app.
Via Bower I downloaded jquery, jquery-validate, jquery-validate-unobtrusive.
Bower created a lib folder in the wwwroot folder.
Somewhere in the ~/lib/jquery-validate/ I should be able to find jquery.validate.js and it's "child" - the jquery.validate.min.js
There were no such files there, so I became suspicious and I created another project, this time a NOT empty web application.
I then compared both jquery-validate folders in the lib folders of the two applications.
My first project (created as EMPTY) has the following folder
structure:
dist folder is not present
My second project (created as WebApplication, NOT empty) has the
following folder structure:
dist folder is present and inside it there's the jquery.validate.js file and also it's child, the jquery.validate.min.js file.
What am I doing wrong? Or is it a bug in VS2015? Or a Bower bug?
You need to run the Grunt file which will build the dist folder for you. The best way I've found to do this right now is to install the Grunt Launcher extension. You can then right click on the package.json file within the jQuery-validation folder and select "NPM Install". That should build the dist folder for you.
I haven't found a way to automate this yet, but I'm sure there is. Just started using Gulp and wasn't using Grunt until I ran into the problem you're having. If someone has some tips there, that would be great. Good luck!
Right click on Bower.json file and select Open Command Line ==> PowerSell
type bower update
That's how I resolved my problem..
If Bower doesn't restore the correct packages:
delete everything from the directory value specified in .bowerrc which is located into your web project folder (e.g. wwwroot/lib)
open Git Bash (Git SCM for Windows -> when installing, choose Git Bash option)
go to your web project folder (where bower.json is located)
run the following:
bower cache clean
bower install
OR
bower update
Below it's an example of bower.json file:
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.7",
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6"
}
}
Unfortunately, none of the above offered solutions worked for me.
The problem was solved by smart people at Microsoft with a VS update or by those working on open source stuff.
Must have been a bug or something.
Anyway, thanks for the help guys..
I have VS2015 and ASP.NET 5 RC1 project with some typescript files. Files are located in scripts folder and tsconfig is in this folder too. When I'm saving typescript file, js file is generated and everything is ok. But js files are not generated during build.
I have VS2013 installed also and some old projects using typescript, so may be there are some problems cause I have many TypeScript versions and many VS versions.
How can I troubleshoot compiling typescript during build? Build log says nothing about typescript. Checkbox 'Compile TypeScript on build' is project settings is enabled. In old ASP.NET projects TypeScript is enabled via custom target in csproj and it's easy to troubleshoot. But in xproj I don't see any typescript related things.
My current working solution is to add postbuild event which manually calls TypeScript compiler.
project.json:
"scripts": {
"postbuild": ["tsc -p scripts\\tsconfig.json"]
}
(assumes you have tsc in your PATH variable)
make sure this is added in your solution file
"Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')"
I had the exact same issue. Worked for me when I edited tsconfig, and placed compileOnSave BEFORE compilerOptions in tsconfig:
{
"compileOnSave": true
"compilerOptions": {
....
},
}
I want to use Bower in an MVC 4 application, developed in Visual Studio 2015. I know when you have a MVC 5 project, with Visual Studio 2015 Update 1, there is a nice UI for Bower management, much like the nuget interface. This part is not really critical.
I am using bower currently - I have npm and bower setup, and I have the package.json and bower.json files in the solution. When you save, Visual Studio automatically runs "npm install" and I have a postinstall step in package.json to run "bower install".
I do not want to put the bower_components into the solution (or source control). What I want is to just keep the json config files, and when you save, all dependencies are retrieved.
This all works fine in development, but what doesn't work is right clicking the Web Project, Publish. Publish does not run "npm install", and does not include files not included in the solution (except it seems to work with nuget packages not included in the solution somehow). The "Publish Web" functionality is how my web applications are deployed to production using IIS deployment.
How can I make Visual Studio Web Publish work with Bower?
An alternative - I have seen there are new hooks for Team System Builds that will run gulp tasks, but I don't know that you can publish directly to IIS in this manner.
instead of referencing/deploying the complete bower_components folder, you can use a gulp or grunt script (pick whatever you prefer) to copy the correct files out of the bower_components folder to something like scripts/lib.
You can then include these files in source control and subsequently deploy them.
The following is a grunt file that I use to accomplish this:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
copy: {
main: {
files: [
{
expand: true,
flatten: true,
src: [
'node_modules/vss-sdk/lib/VSS.SDK.js',
'node_modules/moment/moment.js',
'node_modules/moment-timezone/moment-timezone.js',
'node_modules/jquery/dist/jquery.js',
'bower_components/datetimepicker/jquery.datetimepicker.js',
'bower_components/datetimepicker/jquery.datetimepicker.css',
],
dest: 'scripts/lib',
filter: 'isFile'
}
]
}
}
});
grunt.loadNpmTasks("grunt-exec");
grunt.loadNpmTasks("grunt-contrib-copy");
};
In ASP.NET Core (ie MVC6), Bower is configured (in a .bowerrc file) to add scripts to wwwroot/lib rather than a bower_components folder. That content does get published by Visual Studio.
The same approach using .a bowerrc file will work for MVC4 webs (at least if you are using Visual Studio 2015). However, it also gets checked into version control so it might not be exactly what you want.
The .bowerrc file can be used to do various things (see http://bower.io/docs/config/). However, to get Bower to add scripts to the project in ~/scripts/lib, you simply add the following json:
{
"directory": "scripts/lib"
}
Being the absolute noob to ASP.NET 5 (and MVC6), today I tried installing Angular using nuget, i.e. Install-Package AngularJS.Core. I was expecting it to appear under the Scripts folder I created. I didn't know it was already a bower package. Now my two References folders have references marked with a warning triangle for Angular. How do I get rid of these?
When I try Uninstall-Package AngularJS.Core, I get an error message,
Package 'AngularJS.Core' to be uninstalled could not be found in
project 'Qsaas.Ui'
Yet the troublesome references still exist.
The reason for your error message is that Visual Studio want to remove the project AngularJS.Core from project.json but the line referencing it isn't in project.json. I'd imagine it's either another package with a different name and that it resides in the bower.json by looking at the screenshot you provided.
Nuget Package Manager and the Command Console simply create entries in either your project.json or your bower.json
You can also manually delete the entries from those files and it will delete it from your project as soon as you have saved the file.
e.g.in your project.json remove the AngularJS.Core row entry e.g.
"dependencies": {
"AngularJS.Core": "1.4.7",
"Microsoft.AspNet.Diagnostics": "1.0.0-beta8",
"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-beta8",
"Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta8",
"Microsoft.AspNet.Mvc": "6.0.0-beta8",
}
to
"dependencies": {
"Microsoft.AspNet.Diagnostics": "1.0.0-beta8",
"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-beta8",
"Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta8",
"Microsoft.AspNet.Mvc": "6.0.0-beta8",
}
If I were you I would remove any lines referencing angular in both the project.json and bower.json and save the files. Visual Studio will take care of the rest.
ASP.NET 5 uses NuGet only for server-side components. If your server don't use JavaScript directly (like Node.js do for example) then you have to swich to usage of bower or alternatively npm. The part of documentation describes how one can include AngularJS in ASP.NET 5 project.
To remove NuGet package which you installed by Install-Package AngularJS.Core you can use Uninstall-Package AngularJS.Core. By the way, if you new in ASP.NET 5, I recommend you to examine %userprofile%\.nuget\packages and %userprofile%\Oleg\.dnx\packages where you will find the installed packages. See the article for details.
UPDATED: After executing of Install-Package AngularJS.Core command, the folder AngularJS.Core will be created in the user profile under both %userprofile%\.dnx\packages\AngularJS.Core and %userprofile%\.nuget\packages\AngularJS.Core. You will see additionally AngularJS.Core (1.4.7) as folder under References\DNX 4.5.1 and References\DNX Core 5.0 of your project. The only real changes in your project will be including the line "AngularJS.Core": "1.4.7" in "dependencies" section of project.json file. If you just remove the line "AngularJS.Core": "1.4.7" from the project.json file you will see "Rest" immediately after you save the changes in the project.json file. You can verify that AngularJS.Core will stay in both %userprofile%\.dnx\packages and %userprofile%\.nuget\packages. You can just remove the folders if you don't nees the package in other your projects.
Now you can add new item to the project in context menu of Visual Studio. You can choose "Client-Side\Bower Configuration File". It will create bower.json file in your project. Then you can include "angular": "~1.4" for example in "dependencies" part of bower.json (the name of angular in bower repository if angular). After you save the sile you will see "Restoring packages..." message and you will see the package in Dependencies of the project
You will see Angular files under wwwroot\lib\angular of your project. If you would click on "Show All Files" you will see .bowerrc file as the child of bower.json. If have the following content:
{
"directory": "wwwroot/lib"
}
You can consider to use another location of bower libraries on your web. You can just follow the steps descrined in the article.
You need to open Manage NuGet Packages again on your project and click on the Installed Packages, from there you will see the option to Unistall
I'm using Visual Studio 2015 and created a ASP.NET 5 web application. I have a simple ReactJS component which fails at the line
var _react = require('react');
Instead of using webpack/browserify, I tried to install JSPM which can do (1) JSX compilation to JS through Babel and (2) module management to support require.
Scott Allen on this page talks about integrating JPSM to a ASP.NET 5 project. I can make this work temporarily, but I want to have a task in gulp to copy the system.js to the wwwroot as part of a build process. I have already a package.json which I don't want to be over written when I run the JPSM init commandline.
I installed JSPM through package.json
{
"name": "ASP.NET",
"version": "0.0.0",
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8",
"jspm": "0.15.7"
}
}
How to integrate all these pieces together to have a good build setup?
How to create a JSPM system.js file using Gulp?
How the task will look like creating JS files from JSX using JSPM and Babel?
Should I install requires or similar packages to get the module loading functionality with require keyword?