Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adding React UI Components, by node.js/npm packages, to Blazor Web Assembly Application
dotnet new blazorwasm -n BlazorNpmSample
npm install @fluentui/react react react-dom --save
npm install @babel/core babel-loader webpack webpack-cli --save-dev
import * as React from 'react';
import ReactDOM from 'react-dom';
import { ProgressIndicator } from '@fluentui/react/lib/ProgressIndicator';
export function renderProgressBar(count) {
const Progress = () => React.createElement(
ProgressIndicator,
{
'label': 'React Counter',
'description': count,
'percentComplete': (count % 10) * 0.1
},
null
);
ReactDOM.render(Progress(), document.getElementById('reactProgressBar'));
}
import { renderProgressBar } from './progressbar';
export function RenderProgressBar(count) {
return renderProgressBar(count);
}
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: "bundle.js",
library: "FluentUiComponents",
libraryTarget: "window"
}
};
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/bundle.js"></script>
{
...
"scripts": {
"build": "webpack --mode production"
},
...
}
private async void IncrementCount()
{
...
await Jsr.InvokeVoidAsync("FluentUiComponents.RenderProgressBar", currentCount);
}
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.1</TargetFramework>
<RazorLangVersion>3.0</RazorLangVersion>
<JsLibraryRoot>JsLibraries\</JsLibraryRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(JsLibraryRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" />
<PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
</ItemGroup>
<ItemGroup>
<Content Remove="$(JsLibraryRoot)**" />
<None Remove="$(JsLibraryRoot)**" />
<None Include="$(JsLibraryRoot)**" Exclude="$(JsLibraryRoot)node_modules\**" />
</ItemGroup>
<Target Name="PublishRunWebpack" AfterTargets="Build">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(JsLibraryRoot)" Command="npm install" />
<Exec WorkingDirectory="$(JsLibraryRoot)" Command="npm run build" />
</Target>
</Project>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.