So there is a pretty sweet project that connects up node.js with .NET called Edge.js. I thought it would be pretty sweet if I could use .NET libraries from within Electron to create awesome applications with access to all the .NET and JS libraries I can get my hands on.

A few years ago I wrote an ERMAHGERD translator for the Windows Store. It was my first WinRT app and was pretty fun to build. I made the source code available freely on Codeplex. At the time GitHub was not as huge as it is today. You can still get that code on Codeplex here. I thought it might be a pretty good proof of concept to get an simple ERMAHGERD translator working in Electron using my old C#.NET lib.

I am going to build this app of my previous couple of posts about Electron, Getting Started With Electron in Visual Studio Code and Making the Electron Shell as Pretty as the Visual Studio Shell. However, you should be able to apply what I do here to your project.

Get Electron-Edge

To start, I tried a few of the hello world snippets with Edge.js in straight Node.js and things seemed to work pretty well. However npm install edge into my Electron app didn't fair so well. Apparently Electron uses a non-standard version of Node and the hello worlds barf. After looking around aimlessly at how to fix it I came across a nice little node package called electron-edge. As you can guess, this is just what I needed. To get started, in your project folder for your Electron app you need to run:

npm install electron-edge

You may get a funky error stating you need to custom build edge, but this doesn't seem to cause much problems at run time.

Get And Modify The ERMAHGERD Translator

Next thing you'll need is my ERMAHGERD translator. As referenced before you can download and build the source code here: http://ermahgerd.codeplex.com/. You will need Visual Studio to build it. Mono may work, but I haven't tried it.

You are going to need to make a slight addition to the existing Translate.cs file. You'll need to add this function to the Translate class:

 public Task<object> ToErMahGerd(object text)

 {

      return Task.Factory.StartNew(() => ToErMahGerd(text as string) as object);

 }

In order to access a method from Edge.js the method signature must accept an object and return Task<object>. If this doesn't match things get messy. My existing ERMAHGERD translator didn't have it, but it's an easy fix.

When you build this project you should get an ERMAHGERD.dll file. Copy the ERMAHGERD.dll file into the same folder as your Electron project folder, i.e. the root folder containing your app folder. It is supposed to be possible to point Edge.js directly at your source code, but for this tutorial I am assuming pre-built assemblies.

Putting It Together

Now that I have Edge and the ERMAHGERD.dll added, I need to make as simple UI to do the translation. This is pretty simple. Add the following to your index.html:

 <input id="input-text" type="textbox"></input><br />

 <br />

 <button id="translate-btn">Translate!</button><br />

 <br /> 

 <div id="output-text"> 

 </div>

Then add the following Javascript to your default.js file:

var edge = remote.require('electron-edge');

var toErMahGerd = edge.func({

     assemblyFile: 'ERMAHGERD.dll',

     typeName: 'ERMAHGERD.Translate',

     methodName: "ToErMahGerd"

});



document.getElementById("translate-btn").addEventListener("click", function (e) { 

     var inputText = document.getElementById("input-text").value;

     toErMahGerd(inputText, function (error, result) {

          document.getElementById("output-text").innerHTML = result; 

     }); 

});

 

An there you go! The input text is translated to ERMAHGERD as expected:

Capture

In Closing

This is a pretty quick proof of concept. I haven't played with it enough to see what major caveats exist. One thing I did learn is that passing functions with C# as the comments does not seem to work. Let me know if you find out otherwise.

Combining Electron Edge and .NET into one beautiful application has got me quite excited. We'll see where this takes us...