Skip to content

README.md

Latest commit

 

History

History
36 lines (25 loc) · 2.03 KB

README.md

File metadata and controls

36 lines (25 loc) · 2.03 KB
Raw

TLDR;

To start the vite dev server run:

npm run build
npm run dev

To start the ASP.NET backend, either start the project from your favorite IDE or:

dotnet run --project Server

The app should be available on http://localhost:5012

.NET WebAssembly + React with TypeShim

This sample bundles a .NET library into a react app, while TypeShim provides the interop boundary code. This is just a possible way of using TypeShim and .NET Browser Apps.

The domain of this app is 'people', each person may have a pet (I had to come up with something). The classes representing this domain are defined in the Library project and consumed in the react app project for the UI. The same classes are also consumed in the Server project to facilitate an Api endpoint for pulling some generated data.

A reasonable use case for .NET browser apps that is worth highlighting is that of the PeopleApiClient which defines how to interact with the PeopleController in the server project. As the Controller and ApiClient can share code, this requires no duplicate definitions, which is typically the case with JS+.NET mixed stacks.

Library

This project is where most 'logic' resides. This is rather simple stuff with classes like Person, Pet and PeopleProvider which are all part of the interop API (i.e. have [TSExport]).

When built, this project outputs an npm project in the /Library/bin/wwwroot directory which contains a combination of files from:

  • The source code Library/wwwroot
  • Dotnet wasm build artifacts
  • And ofcourse: typeshim.ts, the generated TypeScript library that you are hopefully here to check out.

Server

This is an ASP.NET project that hosts the PeopleController and includes a proxy to expose the vite dev server from the app project. This provides generated test data for the app to consume.

app

This is the react app that consumes the .NET Library. The usage of interop classes generated by TypeShim can be found for example in /app/src/people/PeopleRepository.tsx.