About
A lightweight gui framework for desktop gui app development.
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
2.Creating a new project(or neu project 😉):
neu create hello
cd hello
3.Test run:
neu run
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
For release:
neu build --release
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>
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;
}
- 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
Thats it!
Task
Find the field in neutralino.config.json, that ends the process when the user closes the main window!
SOCIAL SHARE CARD GENERATOR