Blazor

I recently came across the site https://cloudresumechallenge.dev/ and decided to give it a try using Azure services. To start simple I decided to ignore the DB, CDN part etc and just have the the UI and the middler layer of the app. Below is the high level architecture. The front end of the app will be hosted a static web site in Azure Blob storage. Backend will be an Azure function that will feed the resume data to the frontend over HTTP, the azure function will be a HTTP triggered function. Currently the resume data in JSON format hardcoded in the Azure Function code. As an upgrade to the app, the JSON data can be moved to a CosmosDB instance and put an Azure CDN in front of the UI to deliver content fast to users. ...

I have been reading the Blazor 5 documentation and decided to create a simple project to give its features a try. As always, there were a ton of ideas in my mind but while scanning through dev.to i came across a post by Aleks Popovic, where he made a Radio player using react, so i decided to create one using Blazor 5. I used the same service as Aleks to get the radio stations, called the Radio-Browser. ...

Step 1 Publish the Blazor WebAssembly project Publish the project from Visual Studio,this ensures that the projects is linked which removes all the unwanted dependencies from the output, reducing the size of the assemblies created. Step 2 Create a dockerfile The docker file is very straightforward, pull the nginx image and copy the published Blazor WebAssembly file from the WWWRoot folder to the html folder in nginx ...

Background My WebAssembly project has now been configured to be a PWA (refer the previous article in series). It time to introduce hosting. Since the WebAssembly project handles the client side, I want it to be unchanged but be hosted it in a project that can be used as backend for the UI, hence chose WebAPI. The Changes Create a new solution and add the already created Blazor WebAssembly project Add a new ASPNet core web project and choose WebAPI template and call it the .Server project Add reference of the WebAssembly Project to the .Server project. Install package Microsoft.AspNetCore.Components.WebAssembly.Server to the .Server project. This package contains the runtime server for Blazor application. In the startup class add configuration to the request pipeline to handle Blazor and its routing. // This methods serves the WebAssembly framework files when a request is made to root path. //This method also take path parameter that can be used if the WebAssembly project is only served //from part of the project, giving options to combine web assembly project with a web application app.UseBlazorFrameworkFiles(); //This configuration helps in serving the static files like //Javascript and CSS that is part of the Blazor WebAssembly app.UseStaticFiles(); //Add the below configuration to the end of the UseEndpoint configuration, //this will serve the index.html file from the WebAssembly when the WebAPI route //does not find a match in the routing table endpoints.MapFallbackToFile("index.html"); Your ASPNet Core hosted WebAssembly project is ready to be published and deployed. Pretty easy! ...

Lets get started with an existing Blazor WebAssembly project I already have a Blazor WebAssembly project created implementing Angular Tour of heros application. You can find the project in my GitHub repository here Repo: https://github.com/gopkumr/BlazorTourOfHeroes.git Branch: Release Next step is making this into PWA As with any web application, adding PWA capabilities to Blazor follows the web standard process of adding a manifest json file and the service workers js file. ...

Blazor Web-Assembly Project This starts from my Blazor Web-Assembly project that I create as a replica of the Angular TourOfHeros tutorial. The source code of project is in GitHub This is an attempt to convert the existing project to a Blazor server app with few changes to the wiring up and hosting configuration. Since this article is written with a pre-release version of Blazor Web-Assembly, there could be changes to the steps after the actual release expected in May 2020. ...

an attempt to create tour of heroes’ using Blazor preface WebAssembly is an exciting piece of software, along with HTML, CSS and JavaScript WebAssembly (or WASM) is the fourth language that modern browsers can run natively, WASM is run in the browser in the same security sandbox as the JavaScript frameworks run. WASM also lets you invoke JavaScript and vice versa, making it coexist with JavaScript, More on WebAssembly here: https://webassembly.org/ and Blazor is an open-source implementation of WASM by Microsoft and it has made web development even more exciting by letting run the ever loved C# in the browser. Lets dive right into writing some code, you can read more about Blazor right from its creators here: http://blazor.net/. ...