How to create Blazor components with custom JavaScript and CSS in the components library and properly consume them from WebAssembly application

A few days ago, the Blazor WebAssembly was officially released. And It’s a good reason to “taste” it. After watching a great “Modern Web UI with Blazor WebAssembly” demo on Microsoft Build 2020, a couple of ideas of cool Blazor components appeared in my mind. But such components should interact with some existing JavaScript libraries, so I had to understand how to develop them properly.

Of course, there are excellent JavaScript articles in the Blazor documentation, but they didn’t give me a clear understanding of how to perform the interaction between the C# code of component consumer and JavaScript code from Blazor component library.

And It’s an interesting subject to investigate. So, let’s do it together.

Continue reading →

Using three.js with ASP.NET Core Blazor Server application

If you know C# and you want to create a cool modern web application… But you ~~are too lazy~~ have no desire or have no ability to learn any front-end things like JavaScript and JavaScript-based frameworks… Then probably the best choice for you is a new Microsoft framework called Blazor.

As the official documentation says Blazor was developed for “Create rich interactive UIs using C# instead of JavaScript”. And it sounds actually cool. No more JavaScript, no more “spaghetti code”, no more callbacks and other scary things 🙂

But, wait. What about 2D or 3D graphics like canvas or WebGL? Does Blazor support them? Hmmm… It seems like we still have to use some JavaScript libraries similar to three.js or Babylon.js.

So, it’s quite amusing subject to investigate. Let’s try.

Continue reading →

How to add Webpack 4 to Asp.Net Core 3.1 MVC application step by step

There are not many examples of how to use a Webpack 4 on the front-end part of the ASP.NET Core 3.1 MVC application. One way is to use some specific middleware, but here I will use tools and pipelines that are conventional among the front-end developers:

NPM package manager to manage Node.js packages and to run scripts.
Javascript ES6-module syntax in the JavaScript code.
SASS to process styles.
Webpack 4 to bundle all things together.
and Visual Studio Code as an IDE.

So, let’s start.

Continue reading →