Christian Engvall

The Electron tutorial app is now working with Electron version 5.0.8. After downloading the new version make sure to run:

npm install
npm install -g [email protected]

The biggest difference in this version is enabling nodeIntegration:

webPreferences: {
  nodeIntegration: true
}

You can see the code on Github

In this post we’ll take a look at installing ASP.NET core and Visual Studio code on Linux Mint.

1. Installing .NET CORE

To install .NET Core I downloaded the X64 Binary and ran these commands in a console:

cd Downloads
mkdir -p $HOME/dotnet && tar zxf dotnet-sdk-2.2.202-linux-x64.tar.gz -C $HOME/dotnet
export DOTNET_ROOT=$HOME/dotnet
export PATH=$PATH:$HOME/dotnet

After that to verify the installation you can type dotnet:

$ dotnet --version
2.2.202

2. Install Visual Studio Code

Go to https://code.visualstudio.com/ and select the .deb package for installation.

Click on Install Package - Visual studio Code debian package

After installing the package Visual Studio code will show up in the menu:

Visual studio code in the menu

3. Install the C# Extension

Click on the extensions icon to the left and search for C#. Then click install.

Visual studio csharp extension

4. Creating an ASP.NET Core Project

Now its time to create an ASP.NET MVC project from the terminal. These commands are copied from the Microsoft documentation

dotnet new mvc -o MvcMovie

This creates a new mvc project in a folder called MvcMovie.

We can use the command line to open the newly created project in VS Code:

code -r MvcMovie

And to run the application run:

dotnet run --project  MvcMovie/

... omitted text from command

Hosting environment: Development
Now listening on: https://localhost:5001
Now listening on: http://localhost:5000

Running asp.net mvc project

In this tutorial we’ll look at how to use Electron showSaveDialog. The save dialog will return a string containing a path which the user selected.

To only display a save dialog this is what is needed as a minimum:

const { dialog } = require('electron')

const savePath = dialog.showSaveDialog(null);
console.log(savePath)

But as with the other dialogs we can do more with it:

const { dialog, app } = require('electron')

const options = {
  defaultPath: app.getPath('documents') + '/electron-tutorial-app.pdf',
}
dialog.showSaveDialog(null, options, (path) => {
  console.log(path);
});

The code above proposes a path and a filename to the user when opening the save dialog with defaultPath. It uses app.getPath to get the path to our users document folder and then appends a filename.pdf

I’ve also changed so that the callback method is used which gives us the path. I’d recommend to look at the showSaveDialog documentation to see what more options you can use.

This code is added to Electron tutorial app and you can take a look at the dialog.js file to see this code.

In the next tutorial we’ll continue from here and save the pdf. But that post is coming soon.

With showMessageBox we can display a message with our without a set of buttons from which the user can choose from.

The minimum required code to show a message box is:

const { dialog } = require('electron')

const response = dialog.showMessageBox(null);
console.log(response);

But that would only display a box with no info and an OK-button. The dialog would return a response which contains the index of the button the user clicked.

An empty showMessageBox

Adding more info to the message box

Lets add more info the the box, A question and two buttons and use the callback method as well.

const options = {
    type: 'question',
    buttons: ['Cancel', 'Yes, please', 'No, thanks'],
    defaultId: 2,
    title: 'Question',
    message: 'Do you want to do this?',
    detail: 'It does not really matter',
    checkboxLabel: 'Remember my answer',
    checkboxChecked: true,
  };

  dialog.showMessageBox(null, options, (response, checkboxChecked) => {
    console.log(response);
    console.log(checkboxChecked);
  });

The code above would produce a message box looking like this:

Show message box

• type displays different icons in the messagebox.
• buttons is an array of strings that will be displayed as buttons.
• defaultId sets which of the buttons should be selected when opening the box.
• title displays a title on some platforms.
• message displays a message.
• detail displays more text below the message.
• checkboxLabel the box can display a checkbox as well. this is the label for it.
• checkboxChecked the initial value of the checkbox.

Checkout the dialog documentation to get more info and what values you can set for the different settings.

This code example is added to the electron tutorial app dialog on github.

Use the Electron dialog showErrorBox to display an error message to the user. Not much to it:

1. Call it on the main process.
2. Require dialog.
3. Call showErrorBox() with a title and a message.

const { dialog } = require('electron')

dialog.showErrorBox('Oops! Something went wrong!', 'Help us improve your experience by sending an error report')

This is what the message will look like on macOS in Electorn tutorial app:

Electron error message

The file is called dialog.js in the github repo if you want to look at the code.