tomschrot.vscode.Avalonia.SPA 0.9.0

Hello everybody,

I'm Tom and I created this Avalonia UI project template specialy for VSCode (but it will also work on VS). It is a starting point so you can write cool 😎 multiplatform apps that run on any (well, almost) modern, internet-connected device, whether PC, cell phone or tablet. The underlying technology is based on .NET CORE and AVALONIA UI. The programming languages are C# and a XAML dialect to create modern apps with attractive UIs.

I shortened and reworked Avalonia's original template to enable a low-threshold entry into the development of real multi-platform applications. Using VSCode allows you to productively develop modern applications on all platforms with C#.

I would like to share my experience and knowledge that I have gained as a C# developer and fan of VSCode with the community and hope to be able to contribute a little help.

Requirements: -Install the latest version of VSCode on your PC, Mac, Linux -Install .NET (Core) SDK (for this project to run, use .NET 7/8) -Install the C# DevKit extension to your VSCode installation -(optional) Install the Avalonia extension to VSCode

The project builds an runs under .NET 7/8 for either Desktop and Browser. Right now, publish of WASM Browser for .NET 8 is not working! To be specific: the build succeeds, the app starts in the browser's window but then hangs and never shows the UI!?

The /.vscode/ folder contains comfortable task- and launch-configuration for a pleasing VSCode development experience. Use the VSCode keyboard shortcut (Windows e.g.: Shift-crtl-B ), the task-select dialog pops up and you may select between "Build for Desktop" or "Build for Browser".

To run and debug your app, switch to VSCode's Run & Debug activity. The dropdown allows you to either choose "Debug Desktop" or "Debug Browser". Click the green start arrow and your app will start under debugger control.

Tip: The desktop app does start significantly faster with much lower overhead on your machine. Thus it will be the best pick for fast develop turn over!

Every browser build or publish, will create (overwrite) an output folder under your project's bin path, e.g.

C:\[...]\MySPA\MySPA.Browser\bin\Debug\net8.0\browser-wasm

where a \Release or \Debug folder contains all output files.

But wait! There is an extra folder, called \AppBundle that contains all necessary files to ditribute the app to your web server. Just copy (or point) this folder to the www root of your web server and your app is ready to get launched online! The WASM app will run everywhere, even on your mobile and tablet - great!

You will also find the \AppBundle folder as part of your .Browser project tree. This is the right place where to put your web related stuff, e.g. your custom *.js scripts and all other assets that belong to the web project. (The project contains interop.js to demonstrate interaction with the host-browser.)

If want to publish a release, use "dotnet publish" command.

To publish the WASM project, use the following steps(1):

- Open a new (command prompt) terminal in VSCode
- Navigate to the [ProjectName].Browser folder
- Use the below commands to build/publish the app

e.g. PS C:[...]\MySPA\MySPA.Browser> dotnet publish -c Release -p:CompressionEnabled=true -p:PublishTrimmed=true

The WASM build may take some time and show warnings, but will produce a runnable result!

Publish .NET 7 WASM for browser

ok: dotnet publish -c Release -p:CompressionEnabled=true ok: dotnet publish -c Release -p:CompressionEnabled=true -p:PublishTrimmed=true

Publish .NET 8 WASM for browser (not working!)

fail: dotnet publish -c Release -p:CompressionEnabled=false -p:WasmAllowUndefinedSymbols=true

I hope this is of some help to you, please fell free to make suggestions, ask questions or invite me to dinner 😉

Tom, January 2023 tomschrot@gmail.com

(1): Sure this works for publishing the desktop app. Just change to the .Desktop folder!

Further readings:

https://docs.avaloniaui.net/docs/get-started/ https://play.avaloniaui.net/ https://learn.microsoft.com/en-us/dotnet/core/deploying/single-file/overview?tabs=cli https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-8.0