In this video, I will answer the question "How do I use NPM in Blazor?".

Microsoft’s new ASP.NET Blazor framework has been getting a ton of buzz recently, and rightfully so. Imagine .NET running in the browser. No plugins, no add-ons, no transpilation magic. I can write all my code using HTML and C#. That’s right, I said C#! That means I don’t ever have to write JavaScript again! It’s every .NET developers dream.

Well, let’s be honest here. Blazor is a brand new web technology that is missing a lot of features and capabilities that the more mature web frameworks have. Blazor also relies on NuGet for all it’s goodies. Unfortunately, there aren’t a ton of goodies on NuGet that are meant specifically for Blazor.

However, npm has a ton of goodies for web development. In fact, all the other popular web frameworks rely on npm for their development workflows. So the question becomes, “How can I take advantage of all the mature web libraries, frameworks, and components that are available on npm in my Blazor applications?”.

Well, it’s easy and it can be done in just 4 easy steps.

Step 1 – Create the Blazor Application
The first step we have to take is to create our Blazor application. You can choose to do this in VS Code or Visual Studio. I am going to use Visual Studio to create my Blazor application.

Step 2 – Initialize NPM in your Blazor App
Next, we have to initialize our Blazor application with npm. Let’s start by adding a new folder named NpmJS to our project.

Open a command in the NpmJS directory and initialize npm by running the following command:

npm init -y

This will create a new package.json file in the NpmJS directory and initialize it with default settings.

Next, we need to install a JavaScript bundler. In this example, I will be using webpack. Install webpack and the webpack CLI as development dependencies by running the following command:

npm install webpack webpack-cli --save-dev

Next, we need to add a new folder called src, and then create a new JavaScript file named index.js under the src folder.

The last step to setup NPM in our Blazor application is to add an npm build script that will use webpack to bundle our JavaScript file. Modify the scripts section of the package.json file to add the following build script.

"scripts": {
"build": "webpack ./src/index.js --output-path ../wwwroot/js --output-filename index.bundle.js"
},

Step 3 – Install NPM Packages in Blazor
Now that our Blazor application is setup properly to use npm, we need to choose which npm packages we want to use. There are so many great npm packages to choose from, but in this example, I am going to choose the Radial Gauge Web Component from Infragistics (https://www.infragistics.com/products....

To install the Infragistics Radial Gauge web component using npm, open your command line in the NpmJS directory and run the following command:

npm install igniteui-webcomponents-core igniteui-webcomponents-gauges

Now, open the index.js file and add the following code to initialize the radial gauge.

// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
// Bullet Graph Module
import { IgcRadialGaugeCoreModule } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';

// register the modules
ModuleManager.register(
IgcRadialGaugeCoreModule,
IgcRadialGaugeModule
);

Next, open the Index.razor file and define the igc-radial-gauge web component in your markup

Step 4 – Build, Update, and Run
We’re almost there. Next, let’s run the npm build script we created earlier.

npm run build

After the npm build script has been run and the index.bundle.js file has been generated, we need to update the wwwroot/index.html file to include our newly generated index.bundle.js file just after the blazor.webassembly.js file.

Now, run your Blazor application and and watch the magic happen!

Want the code? You can get it here:
https://brianlagunas.com/using-npm-pa...

Be sure to watch my new Pluralsight course "Introduction to Prism for WPF":
https://pluralsight.pxf.io/bE3rB

Sponsor Me:
https://github.com/sponsors/brianlagunas

Follow Me:
Twitter:   / brianlagunas  
Twitch:   / brianlagunas  
Blog: http://brianlagunas.com
GitHub: https://github.com/brianlagunas

0:00 The Question
1:26 Intro Animation
1:36 Using NPM in Blazor
4:02 Using Web Components in Blazor
6:16 Interacting with Web Components using JS Interop
10:42 End Screen