Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Welcome to our site

Take a moment to join our board

Sign in to follow this  
Smallxmac

Getting Started With Blazor and Electron.NET

Recommended Posts

Getting started with Blazor and Electron.NET 

Background Information:

  • What is Blazor?
    • From the Blazor Github, Blazor is "an experimental .NET web framework using C#/Razor and HTML that runs in the browser via WebAssembly"
  • What is Electron.NET?
    • From the Electron.NET Github, "Electron.NET is a wrapper around a "normal" Electron application with an embedded ASP.NET Core application".

Perquisites:

  • So that this article does not get dated with irreverent information quickly I will be using information from other resources.
  • getting started for blazor 
  • node.js v8.6.0+
  • electron-packager --global

Sample Project Github:

  • If you do not want to follow the steps below, or just want to check out the code I reproduced the following steps in a repo. Besure you all the required perquisites 
  • https://github.com/mandrepont/blazetron

Setting up a simple project:

  1. If you have not done so, check out the getting started for blazor to install perquisites for this tutorial 
  2. Create a new Blazor (ASP.NET Core hosted) project
  3. Install ElectronNET.API
    1. PM> Install-Package ElectronNET.API

       

  4. In %projectname%.Server/Program.cs change BuildWebHost to use Electron
    1. public static IWebHost BuildWebHost(string[] args) =>
                  WebHost.CreateDefaultBuilder(args)
                      .UseElectron(args)
                      .UseStartup<Startup>()
                      .Build();

       

  5. In %projectname%.Server/Startup.cs change Configure to open Electron
    1. app.UseBlazor<Client.Program>();
      Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());

       

  6. Add cli tooling to %projectname%.Server
    1. <ItemGroup>
      	<DotNetCliToolReference Include="ElectronNET.CLI" Version="0.0.9" />
      </ItemGroup>

       

    2. Note at the time the current version is 0.0.9
    3. dotnet restore
  7. Install electron packager
    1. sudo npm install electron-packager --global

       

  8. Init and Run

    1. dotnet electronize init

       

    2. dotnet electronize start

       

Credits:

I claim none of this work as my own and proudly support the work of both the aspnet team on Blazor and the team developing Electron.NET, this post is intended to raise awareness of some of the possibilities for a prototype. Most of the "Setting up a simple project" is directly from both Electron.NET's and Blazor's githubs. 

    Share this post


    Link to post
    Share on other sites

    I hate anything build on frameworks like Electron. They have such terrible performance.

     

    Just look at ex. Atom.

    Share this post


    Link to post
    Share on other sites

    I agree that they sure hog resources and tend to have a clunky API to use, but it does speed up getting a product on all supported devices. I do believe that is an excuse, but I thought blazer was pretty cool and wanted to try it out like this.  

    Share this post


    Link to post
    Share on other sites

    I used Electron with React as a boilerplate, and it's alright. I do agree that it's very bad for performance. The end result is roughly 24% CPU for a single core on mouse move. Discord is a good example of that. Then again, it's really only supposed to be for basic applications with limited content. I'm sure it'll evolve over time into newer / better technologies. HTML5 and JavaScript on the desktop seems to be a smarter approach to cross-device development.

    Share this post


    Link to post
    Share on other sites

    There is no doubt with the rise of PWA's I believe that the browser will be the next general smart client. Obviously there will be use cases for native and certain tech, but I see PWA as a big step.

    Share this post


    Link to post
    Share on other sites

    What I like with HTML / Javascript applications are the development speed. You can create prototypes really fast and pretty elegant.

     

    But I'm always concerned with performance, so I'll eventually convert prototypes to something more native, sometimes you can get best of both worlds though by parsing your UI and converting it to native UIs in ex. another framework.

    Edited by bauss
    • Like 1

    Share this post


    Link to post
    Share on other sites

    I agree that the tech is not there yet, but I'm sure it will close the margin. Not beat the margin but close the gap to make it more viable in other business application that could benefits from fast development and cross platform. 

    Share this post


    Link to post
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now
    Sign in to follow this  

    • Similar Content

      • By Reiko
        So this is a pretty neat project I intermittently work on. This is a discord bot using the Discord.NET wrapper from RogueException. It makes use of the onion architecture and I tend to think while indeed a small project at this time, is the best showcase of my growth as a programmer and knowledge of OOP.
         
        One really neat feature I love to draw attention to is the command system. I sometimes get called out for overengineering the solution, but I highly disagree. One thing I've really bought into is the idea of future-proofing your application. Most discord bot command systems use hard-coded strings somewhere to dictate what command is being parsed. Something many programmers do is use a switch statement. This is fine, however I understood that as the needs for the discord server I administrate grow so will the scope of this project. I needed a more... automated solution. The idea came to me to use reflection for this so I could create/delete classes that were prefixed with the command and compiled at run time in order to be parsed and executed. Long night made short, I evolved from using Activator to compiling lambda expressions which displayed a HUGE performance increase (almost near raw hardcoded performance). This allowed me to have a solution where I don't need to manually maintain a switch block or refactor strings in the event commands change.
         
        Hope y'all dig it!
         
        https://github.com/reikotechnology/projekt-analytix
        Blog Writeup: https://reiko.tech/Blog/View/8
      • By Reiko
        So early this morning I did a live lesson on WPF that basically touched on design, MVVM, data-binding and commands. This video is definitely considered long, however my goal was not just to teach my viewers a certain way of doing it and leaving it at that, but to also go through other ways and why it's wrong. For example one thing I touch on is why the ideology that no code should exist in your code-behind is a good one.
         
        So here's the YouTube version of the lesson with the only edits being done to the start/end times. 😁
         
        C# - WPF Basics (In-Depth Lesson/Stream)
        Source as of current lesson: https://github.com/reikotechnology/chatty
      • By Omicron
        I have been working on an API which I will be using for:
        I got the base working and wanted to share it.
        The API is made in .NET Core 2.1 using Pomelo Entity Framework and FluentValidation 
        The project can be found on my Github: https://github.com/Sedatb23/EpochApi
         
    ×

    Important Information

    By using this site, you agree to our Terms of Use.