https://github.com/maraf/dotnet-wasm-react

.NET on WASM inside a react component
https://github.com/maraf/dotnet-wasm-react

Last synced: 4 days ago
JSON representation

.NET on WASM inside a react component

• Host: GitHub
• URL: https://github.com/maraf/dotnet-wasm-react
• Owner: maraf
• License: mit
• Created: 2022-10-06T14:50:56.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-09T09:36:03.000Z (almost 2 years ago)
• Last Synced: 2023-02-27T07:56:26.752Z (over 1 year ago)
• Language: JavaScript
• Size: 14.9 MB
• Stars: 14
• Watchers: 2
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# .NET on WASM in a react component

This sample shows how to use .NET on WASM integrated into a react application. It goes one step further and extract the react component into a reusable package.

## Project structure

- **app**: target react application using `react-scripts`

- **qrlibrary**: npm library implementing QR generation

  - **dotnet**: .NET implementation of QR generator

  - **react**: webpack bundled react component for showing a QR code image

## Live demo

https://maraf.github.io/dotnet-wasm-react/

## Building source code

### .NET part

- Install .NET 7 SDK

- Run `npm run build:dotnet:debug` in the `qrlibrary/react` folder

If you want to produce an optimized AOT compilation, you need WASM workload for .NET SDK. 

This way the live demo is produced.

- Install wasm-tools workload `dotnet workload install wasm-tools`

- Run `npm run build:dotnet` in the `qrlibrary/react` folder

### React library

In the `qrlibrary/react` folder

- Run `npm install`

- Run `npm run build`

### App

In the `app` folder

- Run `npm install`

- Run `npm run build`

### Under the hood

Building the .NET part, a folder with assets is produced in the `react/dist/dotnet`. The react library than dynamically loads the `dotnet.js` and starts the runtime (which loads the rest of the assets). The structure and file names are defined in the `mono-config.json` which `dotnet.js` uses. 

It is not ideal situation for bundlers like webpack and so to make the solution work, a `postinstall` script is defined in the react library to copy the `react/dist/dotnet` to the application public folder `app/public/qr`. 

This script runs only when the library is installed. If you want to make change to the .NET code and see the changes in the application, you have to reinstall the qrlibrary in the application.

In the `app` folder

- Run `npm uninstall qrlibrary`

- Run `npm install qrlibrary@file:../qrlibrary/react`

This ensures that new version of .NET binaries are copied to the `app/public/qr`. There is an open issue on the NPM repository to support assets, but at the time, there isn't a better way I know of (I welcome any suggestions).