I am getting a bit confused here.
I have an MVC 5 project, I want to use the npm for managing my javascript packages.
I installed npm from nuget and here i am stuck, I cant find the commandline console window or anything like that.
All the info i see online is about node projects.
Can someone direct me to a relevant tutorial.
Using visual studio 2013, MVC 5.
Well regardless of the project, if you want to use npm on Windows, this is what you need:
Download and install Node (you might need a restart).
Make sure that node is installed by opening a command prompt and running node -v (should print a version number).
Run npm -v and see if it's installed (should be).
Now in the context of an ASP.NET MVC project. The newer versions of Visual Studio (I believe 2015) support npm - you can just open the package.json and add dependencies (it will download them behind the scenes). In case you're using an old version, you can simply open a command prompt, navigate to your project and use npm install from there.
Related
Lately I created a ASP.NET MVC Core project from scratch using Visual Studio 2017 (15.6.3). I discovered the usual JavaScript frameworks:
bootstrap
jquery
jquery-validation
jquery-validation-unobtrusive
But unfortunately all Bower support is gone! There's no bower.json, no .bowerrc and no "Manage Bower Packages..." anymore:
What's wrong with Visual Studio's ASP.NET MVC Core template? Did Bower become obsolete?
Please don't duplicate this question to How to use bower packages in Visual Studio 2017 if Bower is deprecated! I don't like a fix pointing to deprecated technologies.
I'd like to narrow the question: What's the simplest (most intuitive) way to replace Bower by NPM? Like Bower did with its .bowerrc: { "directory": "wwwroot/lib" }?
Bower is actually dead.
Microsoft have a lightweight and currently under the radar solution to this called Library Manager (LibMan).
It's a stripped down json based solution, with a very simple UI - that gives you control over which files to download (no more downloading hundreds of files when you just need 1).
Mads Kristensen did a great little intro to the preview at Build 2017.
(the video should start at the correct place around 43 mins).
At the time of writing this it's still in preview - but due to be released with Visual Studio 15.8.
If you'd like to try it before that you can grab it from the GitHub Repo or Visual Studio Marketplace - instructions in the solution to this question
You can still use npm etc - though here are Microsoft's reasons for using this instead (or as well as) - from the Visual Studio Marketplace:
Reasons for using this extension
For apps not currently using another package manager
For projects where you think Bower and npm are overkill
For developers that don't want to use Bower or npm
For developers that values simplicity in their tools
For using custom or private packages/files
For ASP.NET Core apps where NuGet can't install content packages
Bower is dead. The team of bower is refering to Yarn (an addition on NPM).
Since Visual Studio has some NPM support, I would go for it.
Create in the root of your project a package.json (Todo so, right click your project, add item and search for NPM. You will find a npm Configuration File):
{
"name": "SomeName",
"version": "1.0.0",
"private": true,
"dependencies": {
"bootstrap": "3.3.7",
"jquery": "3.3.1",
"jquery-validation": "1.17.0",
"jquery-validation-unobtrusive": "3.2.10",
"jquery-ajax-unobtrusive": "3.2.4",
}
}
Everytime you make changes to the json file, simple press CTRL + S. Visual Studio automaticly calls NPM and restores the packages. Also note, you have intellisence for the package names and version numbers.
After migrating myself, I can not remember to not find a package on npm. But if it's the case for you, note you can reference a github repository directly.
The depenencies are saved to node_modules folder. That's for the new package manager.
Now you have the problem you need to bundle it for release (which you should have done with bower too). Bundeling is the process of combining your Javascript/CSS/Image assets to a single bundle.js, bundle.css, sprite.svg. These should be copied to the wwwroot folder.
For doing so, we have a few options (I will only link to a few, since this would explode the scope of the question):
Webpack
Gulp
Grunt
We found bower to be tricky to get setup, npm is well supported and packages can be installed using the Package Installer from Mads Kristensen, this also works well with the Bundler & Minifier extension, from the same developer for copying the relevant files from the node_modules folder to where you want them.
https://github.com/madskristensen/BundlerMinifier
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller
I would suggest just sticking with npm and forget bower for asp.net core projects,i posted a way of using npm in the link below,
How to use yarn in ASP.Net core MVC to install bootstrap in wwwroot folder
The solution is to do the following:
Launch VS 2017 and open Tools - Extensions and Updates from the main menu
In the window that opens, select Online on the left menu and type package in the Search box. Download the Package Installer
Close all VS instances and wait a while, the VS installer will start which will install that package
After installation, start VS and your project that should have a bower
Start Project - Quick Install Package from the menu
Select npm and type upgrade -g bower in the field
The previous command will update the locations of the bower packages. Now create the bower.json file manually as follows:
Right-click on the project and Add - New Item
Select the JSON file and name it bower.json
Open the file and type in the following file: {"name": "myproject"}
Create another JSON file that you will only call .bowerrc
Open the .bowerrc file and type the following:
{
"directory": "wwwroot / lib /",
"registry": "https://registry.bower.io"
}
Right-click the bower.json file and select the Manage Bower Package option.
In the Browse section, type mustache.js and install
When you click on Project in the window you will see Manage Bower Package
That is all!
The following blog worked for me, although it claims the issue would be fixed in 15.8 which is the opposite of this issue:
https://blogs.msdn.microsoft.com/webdev/2018/07/05/workaround-for-bower-version-deprecation/
I have updated the .bowerrc file to include:
"registry": "https://registry.bower.io"
I then right clicked the bower.json and Restore packages. Then voila!
Someone has asked the exact question I need on this page.
However, as I am new, my rep will not allow me to comment yet! So I have had to create a new question.
A guy in the question linked above suggests to "Type cordova platform add ios;". So there I suppose is where my question is different.
When I type Cordova in cmd prompt, I get a message saying "cordova is not recognized as an internal or external command, operable program or batch file."
Update: Please note, I have followed these steps: http://cordova.apache.org/docs/en/7.x/guide/cli/ And I am able to run the npm commands in CLI. I was hoping to simply update my ios version only.
I have also looked up PATH but I have no idea where to start, problem is, people suggest that I shouldn't need to adjust PATH as running the CLI commands to install the Cordova CLI should just allow me to use it?
So to summarize:
I downloaded the node.js and installed it
I typed this into cmd "npm install -g cordova" which installed
I type "cordova" and get my "cordova is not recognized as an internal or external command" message above
My aim is to upgrade my cordova-ios 4.2.0 to cordova-ios 4.3.0 to fix my main error of "remote build requires your projects to use cordova-ios 4.3.0 or greater with XCode 8.3"
Update 2 9th oct 2017:
I have given up for now with the above, to work around this i installed Node.js 8.6.0 then updated cordova using npm... im now facing some more issues that I am again stuck on and will create a new question.
Hopefully in the meantime, someone can answer this question and i can try again.
I suspect my issues could be relating to the fact i installed VS 2017 and used all the built in nuget packages (for cordova and node.js) and they are conflicting with the manual way in some way (i suspect that, as running the "cordova" command on my other PC worked fine!)
I am trying to move from Bower to NPM.
While I was using Bower, it was easy to configure the .bowerrc file and have the downloaded libraries in a directory such as wwwroot/lib
Now, I am developing a ASP.Net Core MVC app and trying to use NPM as my default package manager. By using Command Line in Visual Studio 2017, NPM creates package.json file and download libraries to node_modules folder. Then, what is next? How can I get JS or CSS files like I used to have in wwwroot/lib director?
Ok, so heres' the thing.
NPM: Node JS package manager, helps you to manage all the libraries your software relays on. You would define your needs in a file called package.json and run npm install in the command line... BANG your packages are downloaded and are ready to use. Could be used both for front-end and back-end.
resource: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express
Now, here's where NPM stops and his dear friend Gulp takes over. I can't type all of it, but to have your css and js files in a folder (and do whatever you want with them) you'll have to use an automation tool (I personally use Gulp but there's a bunch of them out there).
It's easy to set up and the documentation is here:
https://gulpjs.com/
Gulp will basically be responsible of how and where your css files get compiled. It will base its requests for packages in the node_modules folder. So you're good to go. Configure gulp and you should be on your way.
There's also webpack. Never used it, but it seems to be the future of automation:
https://webpack.js.org/
I'd suggest using webpack.
Issue: RdKafka setup is not finding/recognizing librdkafka in Visual Studio 15
Context:
In order to get started with RdKafka in visual studio 15, I ran the generic paket+nuget setup command (via powershell): paket add nuget rdkafka
After this, I see RdKafka has been installed successfully in my solutions package location. I also see a librdkafka package present.
Adding RdKafka as a reference in my solution works as well (I can't add the librdkafka dlls due to an error message from the IDE).
However, trying to run anything using librdkafka leads to a library not found.
What I've tried:
Removing rdkafka completely and paket reinstalling/updating/restoring
Cleaning + re-building the solution in IDE
Moving the librdkafka package around/including it in path
All the above to no success
Any suggestions on how to proceed?
So, it turns out someone else on my team figured out how to make this work, though admittedly it's a little bit of a hack. VS allows for pre-build events (Found by right clicking on your project > Properties > Build Events > Edit Pre-Build). And in there I dropped in the following:
{xcopy /y /d /f
"$(ProjectDir)..\packages\RdKafka.Internal.librdkafka\runtimes\win7-x64\native*.*"
"$(TargetDir)"}
And just like that, it works. The explanation for the above is that we pull the native dlls that cannot be referenced directly by copying them into our projects target directory just before the build is done.
Hopefully, this helps some future folks, who don't consider rewriting the library into an referable form, like I did.
I am learning angular 2 with Typescript.
I am using following resource.
QuickStart with Angular 2
Now from there and other examples i found that they telling to create package.json file that lists all dependencies for project.
I think creating this package.json file and listing all dependency packages this kind of structure is followed in .NetCore Project.
In MVC 4 or 5 we have packages.config file which lists although packages that we are going to use.
I am not saying we can not use package.json file when we have package.config file.
But is there any simple way to integrate Angular 2 with typescript in MVC Webapplication project using NUGet Packages and get started?
If not available please let me know how can i setup Angular 2 with type script in ASP.Net MVC 4 or 5?
As you said, in ASP.NET MVC application you have a package.config file. This file holds the information about NuGet packages you've installed in your app. This file is related to the server-side packages.
package.json file is related to a front-end part of your app. It also holds list of packages that you've installed in your app. This time npm packages. It also holds information about your app and more. You can read more about it here.
You can't mix those files and you don't want to. Firstly, those files have different format (XML and JSON). In addition, as I said before, they hold information about different parts of your application. Lastly, and this is my personal opinion, when you create application with rich UI and use Angular2, it'd be better to split the parts of your app into 2 different projects. One of them with Web APIs and the second with the UI part only. With such structure, you will no need for packages.config in UI project and no need for package.json in Web API project.
For you last question, you can start with here. You also can take a look on this sample app.
In order to run Angular 2 in an ASP.NET MVC 4.5 (VS 2015):
1) install Node.js (at least 4.4.x), npm (at least 3.x.x) and TypeScript for Visual Studio 2015 (VS -> Tools -> Extensions and Updates -> Online). You may check your version of node and npm by running the following in the terminal: "node -v" and "npm -v".
2) copy the QuickStart files (everything what quickstart-master constains, not the folder itself) into your project (to the folder containing the .csproj file) - you can download the QuickStart files from: https://github.com/angular/quickstart
3) In the Solution Explorer click "show all files" (probably the third icon from the right, just above the search bar). Select the following files/folders and include them in the project:
app folder (answer No if asked to search for TypeScript Typings)
styles.css
index.html
package.json
tsconfig.json
typings.json
4) In Visual Studio, right click on "package.json" and select "Restore Packages" - this will install all of the packages defined in the package.json into your project.
The result of this operation is the same as running "npm install" in your project location from the terminal.
Probably there'll be some warnings in the Output window - ignore them. A new folder called "node_modules" will be generated (you need to refresh the Solution Explorer to be able to see it) - advice is not to include this folder in the project.
5) In the tsconfig.json file, next to "compilerOptions" add the following:
"compileOnSave": true
as shown below
{
"compilerOptions": {
...
},
"compileOnSave": true
}
Restart Visual Studio.
6) In Visual Studio, right click on "index.html" and click "Set as Start Page".
As a reference, here's the official documentation for running Angular
2 (quickstart) in ASP.NET 4.x (Visual Studio 2015):
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html
Also check out the link which includes steps to run.
You need to include package.json (Angular 2 gets installed using NPM)
Run NPM install
Run the GULP tasks
Run F5 to see results.
https://github.com/mithunvp/ng2Mvc5Demo
As its already accepted still it will be alternate way to get started
If You want to install Angular4 on nuget package manager console you can use Install-Package Angular4 -Version 1.1.0 and follow these steps:
Angular 4
*********
Prerequisites
`````````````
1. Download and Install Node js
2. Install Visual studio 2015 update 3 or above
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links)
Follow the steps to install package.
````````````````````````````````````
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0'
Follow the steps after package installation
```````````````````````````````````````````
1. Open Node.js Command Prompt
2. Navigate to project location(use commands such as pushd,cd etc)
3. Run the command 'npm install'