I am trying to use material ui for react , however this library can only be used with node package manager (npm) , my ASP.net MVC 4 project uses Nuget as a package manager so there is no way to add npm modules or even use them within js file
I need a solution to be able to add Material UI npm package to my project , is it possible to do so ? to combine both nuget and npm to manage my package
Nuget package are too limited and all the useful stuff need npm or yarn to be installed
It would be really helpful if i find a detailed guide or steps to make this work
latest nuget package of react js is 14
i tried npm install #material-ui/core
but i cant even install the module because i dont have a packages.json file and my project does not recognize the materiel modules so i cant also use improrts within JSX nor JS files
You install the node modules package in your ClientApp (or whatever directory your React app lives) that should be located on the same level as the controllers. This directory will function as it's own closed off react application, which have to be hooked up to the ASP.NET solution.
Microsoft has a template for creating ASP.NET web applications with React which you can check out.
You use nuget to handle dependencies in your solution and then npm to handle the node modules directory.
I want to refresh part of view, so I want to use Ajax.BeginForm. Fo this I am installing jquery.unobtrusive-ajax plugin from nuget package manager.
The problem is, After installation of Package from Nuget, JavaScript files are not coming in lib or script folder.
Am I making any mistake or there is a different way to do it?
Thanks
Keval
For scripts use bower / npm / yarn / libman. Nuget is not recommended for client side libraries. It is for installing server side packages / libraries.
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!
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.
I'm using yeoman and it's a great tool. It uses bower for managing dependencies and it assumes you would have all dependencies listed in bower file and then install it in bower_components folder and link them from the your html. But I didn't find any info about the case when some of project dependencies(js or css) are not under bower (for example, it could be some commercial libraries, purchased by developer and not available in open source). How should I manage this case? Let's assume general yeoman webapp template. Where should I store js and css from the libraries which are not under bower?
If the dependency you want to add to your project is not managed by Bower, then it should be separate from your "bower_components" dir. That directory should only have things that Bower controls: i.e., things installed with this command:
bower install
You should create a "lib" dir that has third party components that you install and update manually.
app/
├--bower_components/
│ └--angular/
└--src/
└--css/
└--js/
└--lib/
├--manual_dependency/
└--other_dependency/