Recipe: standalone desktop app of your game with neutralino (small binary sizes ~3 mb)

In this article we will set up our own neutralino build environment which we can use to build a native desktop app of our game.

The benefit of using Neutralino.js over Electron is, that it produces a very small output, roughly ~3 mb compared to Electron ~200 mb.

What's also pretty nice is, that all your code files, images, and assets is bundled into a single resource file (resources.neu), so they are not directly exposed to the end user.

Neutralino will generate only 3 files:

• the executable
• a dll file
• the aforementioned resources.neu file

thats it.

A minimalist "Hello World" project will be about 3 mb.

In addition, Neutralino is also easier to use then Electron (imo).

0. What is Neutralino.js

Neutralino.js is a lightweight, portable, cross-platform application development framework. It allows you to develop applications with web technologies (HTML, CSS, JavaScript) while providing access to native OS functionality.

Neutralino.js applications are less resource-intensive and have smaller binary sizes compared to applications built with similar frameworks, such as Electron or NW.js, making them a good choice for lightweight desktop applications.

Neutralino.js achieves this by using a minimal web server to serve your application files and a webview component provided by the operating system to render your application. This approach significantly reduces the size of the application binary and the system resources it requires to run.

As of now (year 2023) Neutralino.js supports Windows, Linux, and macOS. The framework is open source and is maintained by a community of developers.

1. Install Neutralino.js

Firstly, you need to install the Neutralino.js CLI. You can do this by running the following command in your terminal:

npm install -g @neutralinojs/neu

2. Create a New Neutralino.js Project

Now, you can create a new Neutralino.js project by running the following command:

neu create my_game

Replace "my_game" with your desired application name. This command will create a new directory named "my_game" with all the necessary files.

3. Run the Application

Go into the new directory and start the app:

cd my_game
neu run

You should see a new window with a "Hello, World!" message.

4. Replace the Default App with your Game

Delete everything in the my_game/resources folder except the js folder (we have to keep the neutralino.js file). Copy your microStudio html5 game into the my_game/resources folder so that the index.html file is located at my_game/resources/index.html.

5. Update Configuration

If necessary, update the neutralino.config.json file to match your desired app settings for example the window size, the window mode, the window icon etc. . These can be found under "modes/window":

"modes": {
    "window": {
      "title": "my_game",
      "width": 1280,
      "height": 720,
      "minWidth": 400,
      "minHeight": 200,
      "fullScreen": false,
      "alwaysOnTop": false,
      "icon": "/resources/icon32.png",
      "enableInspector": false,
      "borderless": false,
      "maximize": false,
      "hidden": false,
      "resizable": true,
      "exitProcessOnClose": true
    },

• "enableInspector": false, enables/disables the developer tools. Usually you want to disable them for publish builds.
• "exitProcessOnClose": true whether when pressing the close button should close the window.

The rest should be self explanatory.

6. Build the Application

Finally, you can build your application to a standalone executable with:

neu build

This will create a dist folder containing the executable versions of your app for all the available platforms.

Nice detailed explanation, thanks a lot :)