Christian Engvall

Litium is installed via a Nuget feed in Visual studio. You can install Litium without the Accelerator but in this tutorial we’ll take a look at installing Litium and Litium Accelerator.

Litium Accelerator

The Litium Accelerator is a pre-packaged Litium site which speeds up the development when starting new projects. It is delivered as source-code and you have the possibility to change what you need.

System Requirements

When this post is written the latest version of Litium is 7. The development environment system requirements are at the time:

• Visual Studio 2017 running with elevated permissions (other versions may work but have not been tested. I’m using VS2019).
• IIS 7 or later with the Web Sockets protocol enabled.
• .NET Framework 4.7.2 Developer Pack.
• Access to Litium NuGet feed. To get access you need an account at Litium Docs.
• Microsoft SQL Server 2016 or later with database compatibility level 130.

This and more information can be found at the System requirements of the Litium docs.

1. Downloading Litium Accelerator

At this point I assume you’ve installed the IIS and the .NET framework, the nuget feed, and has created an account that has got download rights for the accelerator. (Linked to in the System Requirements above).

Go to Litium docs - Download and download the accelerator. If you have access to it the package will show up at the top at Latest accelerators. At the time the latest version is Litium Accelerator 7.2.3.

Downloading Accelerator

Extract the .zip into a folder where you want to work with the solution.

2. Install via Visual Studio

• Open Accelerator.sln after extracting the package.
• Go to View -> Other Windows -> Package Manager Console and run the command Update-Package -ReInstall
• Wait for install to complete (This took around 3 minutes for me).

Running Update-Package -ReInstall

If you, like me, got an error saying: “Update-Package : Some NuGet packages are missing from the solution. The packages need to be restored in order to build the dependency graph. Restore the packages before performing any operations” Make sure you’ve set up the nuget feed correctly and click the restore button that has shown up at the top of the package manager console. (I had recently changed passwords to my account and needed to update it to get it to work)

3. Configuring the Accelerator

Now right click on the Litium.Accelerator.Mvc-project in the Solution Explorer and click on Set as startup project and run the project.

First run of Litium Accelerator

When the site has started we are redirected to the login page. Login with your windows account (ex: DOMAIN\[email protected] or .\Crille)

Then click on the Cogwheel (top right) -> Deployment -> Accelerator

Select a name and a domain name for the site. I’m using accelerator.localtest.me in this case. By choosing a localtest.me-domain I do not need to add anything to the hosts-file.

Check the Create a set of example products and categories checkbox and the click Import. This will give us some example data.

Deploy accelerator

4. Moving database to Sql Server

By default the accelerator uses a LocalDb instance. Lets move that db to a MSSQLServer instance.

Open Microsoft SQL Server Management Studio as an administrator then right click on Databases and select Attach…

Attaching database

Then click on Add… and select the .mdf -file that is located in the Litium.Accelerator.Mvc/App_Data folder.

Attaching mdf

Then click ok and attach the database.

When this is done you need to update the FoundationConnectionString in web.config to point to your MSSQL-Instance instead (Not covered here).

5. Adding an IIS site

Next fire up the IIS and right click on Sites and then on Add Website… and select a name.

Point the Physical path to \Src\Litium.Accelerator.Mvc and add the hostname you selected. (in my case http://accelerator.localtest.me/)

You might need to run the Application pool as your local user to get access to the database. But I’ll leave the iis-configuration up to you.

Now browse to the site and you should end up with something like this:

Litium Accelerator

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.