{"id":20600804,"url":"https://github.com/maraf/dotnet-wasm-react","last_synced_at":"2025-08-03T19:07:37.830Z","repository":{"id":61705578,"uuid":"546730671","full_name":"maraf/dotnet-wasm-react","owner":"maraf","description":".NET on WASM inside a react component","archived":false,"fork":false,"pushed_at":"2025-07-10T16:24:32.000Z","size":15651,"stargazers_count":42,"open_issues_count":5,"forks_count":13,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-10T20:43:08.708Z","etag":null,"topics":["dotnet","react","webassembly"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maraf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-06T14:50:56.000Z","updated_at":"2025-07-10T18:48:38.000Z","dependencies_parsed_at":"2023-02-08T09:46:18.853Z","dependency_job_id":null,"html_url":"https://github.com/maraf/dotnet-wasm-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maraf/dotnet-wasm-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maraf%2Fdotnet-wasm-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maraf%2Fdotnet-wasm-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maraf%2Fdotnet-wasm-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maraf%2Fdotnet-wasm-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maraf","download_url":"https://codeload.github.com/maraf/dotnet-wasm-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maraf%2Fdotnet-wasm-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268596612,"owners_count":24275916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dotnet","react","webassembly"],"created_at":"2024-11-16T08:39:21.985Z","updated_at":"2025-08-03T19:07:37.820Z","avatar_url":"https://github.com/maraf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# .NET on WASM in a React component\n\nThis 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.\n\n- [Blazor Community Standup - Integrate .NET in JavaScript apps](https://www.youtube.com/watch?v=tAh899Gri4E)\n- [Blazor + React demo](https://github.com/maraf/blazor-wasm-react)\n\n## Project structure\n\n- **app**: target React application using rollup to do the JavaScript build\n- **qrlibrary**: npm library implementing QR generation\n  - **dotnet**: .NET implementation of QR generator\n  - **react**: rollup bundled React component for showing a QR code image\n\n## Live demo\n\nhttps://maraf.github.io/dotnet-wasm-react/\n\n## Building source code\n\n### .NET part\n\n- Install .NET 10 SDK (preview7+)\n- Run `dotnet publish` in the `qrlibrary/dotnet` folder\n\n### React library\n\nIn the `qrlibrary/react` folder\n\n- Run `npm install`\n- Run `npm run build`\n\n### App\n\nIn the `app` folder\n\n- Run `npm install`\n- Run `npm run build`\n\n### Under the hood\n\nIn .NET 10 we have added a way to produce JavaScript bundler friendly build output. In JavaScript world, file dependencies (like other JS files or images) are resolved using import statements.\nIn browser world, only JavaScript files can be imported using import statements. Because of this, we introduced an MSBuild property `WasmBundlerFriendlyBootConfig=true` to switch between browser-runnable output\nand JavaScript bundler-friendly build output. Switching this on allows JavaScript bundlers to consume output of .NET build (publish).\n\n.NET build (`dotnet build` or Build in VS) doesn't copy all files to the output directory. This happens only for publish. We do it make incremental builds faster. As a result, integrating .NET build output into JavaScript bundlers work properly for publish output. Making it work for build output should be possible by properly mapping imports to individual locations using rollup (or other bundler) custom plugin. We don't provide such plugin at the moment.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaraf%2Fdotnet-wasm-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaraf%2Fdotnet-wasm-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaraf%2Fdotnet-wasm-react/lists"}