Search code examples
asp.net-mvcvisual-studionpmgulpmaterial-components-web

Is there a way to integrate Material-components-web in ASP.NET MVC

I'm trying to integrate material-components-web from Material.io. But it turned out to be quite a hassle. I'm also very new to the Node world, so i'm learning as i try a long.

This is what i did so far:

  1. Coupled NPM to Visual Studio 2017, I can use a lot of functionalities, but it doesn't really work like i imagined. Npm init for example hangs, but install/update commands work fine.

  2. Got a Packag.json with the following dependencies:

    "devDependencies": { "material-components-web": "0.44.1", "gulp": "3.9.1", "gulp-util": "3.0.8", "gulp-minify-css": "1.2.4", "gulp-path": "4.0.0", "gulp-js-minify": "0.0.3", "gulp-sass": "3.1.0", "gulp-flatten": "0.4.0" }

  3. Installed Gulp and set up my Sass compiler and css/js minifier(for production). And set them up to run before i build my project

I have my @material folder with all the basic components in it. But now i'm running into the problem of the Javascript module dependencies.

I noticed that the standard 'require' methods where not working because it it a node specific resolver (Correct me if I'm wrong). First I tried to integrate Babel in gulp to transform the imports to ECMA. But that seemed unsuccessful.

Now i am converting all the import/exports by hand (so updating is a no go). It started out working great. But now i'm getting tangled up in dependencies hell, with references and imports all over the place... From dependencies like (focus-trap.js, tabbale and xtend)

Is this even possible to integrate in ASP.NET MVC? I also noticed that Material-components-web is starting to switch to TypeScript on their github!

Any tips or help are really appreciated.

Solution

  • I ended up doing the following to be able to use material-components-web for the front-end:

    1. Downloaded Node.Js and added the NPM location as a 3rd party reference to Visual studio 2017.
    2. Added the node_modules folder to my project and ran npm-install
    3. Copied all the dependencies (Except 'Babel' the transpiler). And installed them with NPM
    4. Created a WebPack config for compilation, extraction etc. etc.

    It was actually pretty basic, but without any knowledge and information to use this type of NPM packages in an older MVC project was quite a big hassle to find out.

    If somebody needs more informations or help, just comment below.