https://github.com/timmoth/blazor-npm-guide
Using NPM packages in a Blazor Wasm app
https://github.com/timmoth/blazor-npm-guide
Last synced: 9 months ago
JSON representation
Using NPM packages in a Blazor Wasm app
- Host: GitHub
- URL: https://github.com/timmoth/blazor-npm-guide
- Owner: Timmoth
- License: mit
- Created: 2022-02-06T21:04:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T20:57:54.000Z (over 3 years ago)
- Last Synced: 2025-04-19T19:36:46.576Z (about 1 year ago)
- Language: HTML
- Size: 487 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Using NPM packages in a Blazor Wasm app
=======================================
Find the demo project on [Github](https://github.com/Timmoth/blazor-npm-guide)
Prerequisites:
--------------------------------------------------------------------------------------------------
* [Nodejs](https://nodejs.org/en/download/)
* [Visual Studio 2022](https://visualstudio.microsoft.com/)
* ASP.NET and web development workload
Setup your solution and blazor wasm project
dotnet new blazorwasm -n blazor-npm-guide
dotnet new sln
dotnet sln add ./blazor-npm-guide
Create a new directory for our npm packages and the js source that makes use of them
mkdir jslib
cd jslib
mkdir src
Initialize a new npm project (you can just skip past all the questions)
npm init
Install webpack to bundle our library and put the output inside wwwroot/js
npm install webpack webpack-cli
Create the webpack.config.js
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
output: {
path: path.resolve(__dirname, '../wwwroot/js'),
filename: "jslib.js",
library: "jslib"
}
};
Add a script to build webpack in package.json
{
"name": "jslib",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"highlight.js": "^11.4.0",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2"
},
"devDependencies": {
"@babel/core": "^7.17.0",
"babel-loader": "^8.2.3"
}
}
Install babel
npm install babel-loader @babel/core --save-dev
Install your npm package, in this instance we're going to install highlight.js
npm install highlight.js
Create src/highlight\_lib.js
import hljs from 'highlight.js';
export function highlight() {
hljs.highlightAll();
}
Create src/index.js to act as the root that exposes the functionality of our npm packages
import { highlight } from './highlight_lib';
export function Highlight() {
return highlight();
}
Build our library
npm run build
Npm will have built our library and placed it in wwwroot/js, make sure to include the script in the body of the index.html
Timmoth
Loading...
Inject IJSRuntime & make jsinterop call to jslib.Highlight
@page "/"
@inject IJSRuntime JsRunTime
import { highlight } from './highlight_lib';
export function Highlight() {
return highlight();
}
@code
{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JsRunTime.InvokeAsync("jslib.Highlight");
}
await base.OnAfterRenderAsync(firstRender);
}
}