DEV Community

Cover image for Hello World in Neutralinojs
csm
csm

Posted on

Hello World in Neutralinojs

#neutralinojs #desktop #gui #web

About

A lightweight gui framework for desktop gui app development.

link to website

Features

  • Simple
  • Lightweight
  • Crossplatform
  • Web technologies for ui coding
  • Can use any front-end frameworks

Development Environment

  • os: linux mint
  • code-editor: vscode
  • node.js (I use bun!)
  • neutralinojs

Hello World App

1.Installing neu(cli tool for neutralinojs) tool:

npm install -g @neutralinojs/neu
Enter fullscreen mode Exit fullscreen mode

2.Creating a new project(or neu project 😉):

neu create hello
Enter fullscreen mode Exit fullscreen mode 
cd hello
Enter fullscreen mode Exit fullscreen mode

3.Test run:

neu run
Enter fullscreen mode Exit fullscreen mode

You should see a simple app!

4.Project structure:

  • There are a bunch of files and folders!
  • neutralino.config.json is for configuration like we can set the size of the main window, etc.
  • bin/ folder contains neutralino binaries
  • resources/ folder is where our code lives!
  • dist/ folder (is generated after we build the project) is where our end app lives!
  • So,when user downloads our app,he gets a folder with binaries for different platforms and a resources.neu file.
  • The user double clicks the binary for his specific platform(like hello-linux_x64) and the executable will start the app by loading our ui code that was packaged into resources.neu file.
  • Simply, the app means the executable and the resources.neu file.

5.To build the project:

neu build
Enter fullscreen mode Exit fullscreen mode

For release:

neu build --release
Enter fullscreen mode Exit fullscreen mode

It produces a zip file in dist/ folder.

6.Now, making the simple app even simpler!

  • Delete all the code in resources/index.html and put this: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <div id="neutralinoapp">
      <h1>Hello World!</h1>
    </div>

    <script src="/js/neutralino.js"></script>
    <!-- Your app's source files -->
    <script src="/js/main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here, the two script tags are important!

  • Now replace the content in styles.css with: 
html,body{
margin: 0;
padding: 0;

}

h1{
margin: 5rem;
color: blue;
}
Enter fullscreen mode Exit fullscreen mode
  • And for now just remove all the code in resources/js/main.js (No js for now!)
  • Now run the app and see! 
neu run
Enter fullscreen mode Exit fullscreen mode

Thats it!

Task

Find the field in neutralino.config.json, that ends the process when the user closes the main window!

Top comments (0)