1571196640

How to create JavaScript desktop programs with NW.js

NW.js is a framework for building desktop applications with HTML, CSS, and JavaScript. It works by combining a JavaScript app with Node.js and Google’s Chromium browser engine into a single desktop program.

I’m a frontend developer with little experience in creating desktop applications and installers, so it took me some time to find all the details of how to set everything up. This tutorial is an overview of my findings. I hope it can help you to get started using NW.js and to create desktop programs and installers. I’ve written this tutorial using MacOS 10.14 (Mojave), Ubuntu 18.04 and Windows 10.

NW.js instead or Electron

Electron is the better known of the frameworks for creating native applications. I also found it easier to use. My app however relies on requestAnimationFrame for timing, and I couldn’t use Electron because of an issue in Chromium (the timer stops when the app window is hidden). In the end however NW.js is not that hard to use.

The ‘Metronome’ project

The app for this tutorial is a simple metronome. Useful for for musical timekeeping. It uses requestAnimationFrame and it generates sound, so it will be easy to demonstrate that with NW.js the requestAnimationFrame timer will keep going even if the app’s window is hidden behind others. See a demo of the app here: https://hisschemoller.github.io/nwjs-tutorial/src/.

Tutorial overview

There’s quite a lot to go through, so here’s an overview of what’s included in this tutorial:

Project setup to run it in the browser
Run NW.js directly from the command line
Create a Mac desktop program (.app file)
Create a Linux desktop program
Create a Windows desktop program (.exe file)
Create a Mac installer (.dmg file)
Create a Linux installer (.deb file)
Create a Windows installer (.exe file)

Project setup to run the app in the browser

Clone the Git repository for the tutorial at https://github.com/hisschemoller/nwjs-tutorial.

Install the dependencies as usual and start as defined in package.json.

yarn install
yarn start

The app will now be available at http://localhost:3000

This is image title

Open the URL in a browser and you’ll see a small counter display. Click the Play button. The counter increases and a short blip sounds at each counter increase.

Note that the metronome stops if you switch to another browser tab, or if the browser is completely hidden by other windows.

Run NW.js directly from the command line

During development an app can easily be tested within the NW framework from the command line. To set this up requires just a few steps:

Add the NW package as a dependency using NPM
Create a manifest file
Run the app in the NW framework

Add NW as an NPM package

Two flavors of NW exist: For development purposes there’s an SDK version which contains the Chrome developer tools. The regular version lacks the developer tools and because of that results in a smaller file size. To use the SDK version add -sdk to the version string.

Add NW as a devDependency in package.json_:_

"devDependencies": {
  "nw": "0.38.0-sdk"
}

Create a manifest file

NW needs a manifest file to run. The manifest file is a JSON file called package.json. So confusingly it’s named exactly the same as NPM’s package.json. The difference however is that the manifest file is located in the same directory as the app’s source files, while NPM’s package.json is at the root of the project.

+-- nwjs-tutorial
|   +-- package.json (NPM)
|   +-- src
|   |   +-- index.html
|   |   +-- package.json (NW manifest file)

As a bare minimum the manifest just needs the fields name and main for NW to run. The main field points NW to the app’s entry point, which in this case is index.html.

A lot more settings are possible however. a reference of all available options can be found in the NWjs Manifest Format Reference.

This is the manifest for the Metronome app:

{
  "name": "Metronome_manifest_name",
  "description": "A metronome app to keep time.",
  "main": "index.html",
  "chromium-args": "--disable-raf-throttling",
  "window": {
    "icon": "img/icon.png",
    "height": 240,
    "resizable": false,
    "width": 400,
    "title": "Metronome_manifest_window_title"
  }
}

Run the app in the NW framework

I’ve added a script in package.json to run NW, but it could as easily be started by just typing yarn nw in the command line.

"scripts": {
  "start-nw": "nw --disable-raf-throttling"
},

Once started, NW looks for the "main" field in package.json to find the app’s entry point, and looks for the manifest file in the same directory as the entry point. It then has all the data it needs to run the app.

Try running NW with and without the --disable-raf-throttling command line option and notice that with the option the metronome keeps running when the app is hidden.

Creating a desktop program with NW.js

To create a desktop program a build of NW can be downloaded from the nwjs.io download page at https://nwjs.io/downloads/. Builds are available in different flavors, for Mac, Linux and Windows, 32 or 64 bit, with or without the SDK option.

This is image title

In general to create a desktop program you will add the project’s source files to the downloaded NW build, and the resulting package is the program to distribute. There are differences however between Mac, Linux and Windows. NW.js has it’s own documentation here.

Create a Mac desktop program (.app file)

Download a Mac release from https://nwjs.io/downloads/ and unzip the download. The unzipped folder contains the file nwjs.app (among others).
Package all the files from the project’s /src directory into a zip file and rename the zip to app.nw. So, to be clear, the file extension will be .nw instead of .zip, and it will contain index.html, the css, js and fonts directories and the package.json manifest file.
Put app.nw inside the downloaded Mac release, in the nwjs.app/Contents/Resources/ directory. (right click on nwjs.app and choose ‘Show Package Contents’ to open it)
To add the app icons, rename /assets/icons/metronome.icns to app.icns and paste it into nwjs.app/Contents/Resources/. The file must replace the existing default icons. See below to create an .icns file.
Also overwrite nwjs.app/Contents/Resources/documents.icns with the .icns file.

This is image title

The file nwjs.app is now an executable that runs the app. It’s the only file you need, you can delete all the other files in the download. Rename the file to Metronome.app. Double click to run it.

Mac .icns file

On a Mac you can create an .icns file with the iconutil command line utility. Here are two tutorials:

On MacOS Mojave I created the icon files as described in the first tutorial and ran iconutil as described in the second one. That worked. A general overview of the steps:

Create all the required png images. (For this tutorial they’re in assets/icons/metronome.iconset).
Put all files in a folder and rename the folder so the name ends with .iconset. In this case metronome.iconset.
Start Terminal and cd to the directory where the .iconset is.
Run iconutil to generate the .icns file, like this:

iconutil -c icns metronome.iconset

Create a Linux desktop program

I have tested this on Ubuntu 18.04, but I don’t know in how far the process is different in other Linux distributions.

Download a Linux 32 or 64 bit release from https://nwjs.io/downloads/ and unzip the download.
Copy all files in the /src directory of the project into the root directory on the downloaded package. In my case it’s called nwjs-sdk-v0.38.0-linux-x64. So your source files and package.json manifest file will share the same directory with the nw file in the download.
Copy the /metronome.desktop file to the same root directory as the source files and manifest. See below for creating a .desktop file.

Linux .desktop file

In GNOME and other freedesktop.org-compliant desktops, an application gets registered into the desktop’s menus through a desktop entry, which is a text file with .desktop extension. This desktop file contains a listing of the configurations for your program.

The file should have a unique descriptive filename without spaces. For this project I use metronone.desktop. The location should be, to be accessible by everyone:

/usr/share/applications

Or, to be accessible to a single user:

/.local/share/applications

Some .desktop file resources:

Manually install on Linux

Download a Linux package and copy the source files, manifest and icon file as in the steps of ‘Create a Linux desktop program’ above.

Rename the package to metronome.
Copy the package to the /opt directory.
Copy the metronome.desktop file to /usr/share/applications.

To copy to the source files directory and the desktop file use the cp command with administrator rights in a terminal:

sudo cp -r /path/to/metronome /opt
sudo cp /path/to/metronome.desktop /usr/share/applications

This is image title

You will now be able to find and run the app just like any program you’ve installed. No restart or anything needed.

Create a Windows desktop program (.exe file)

Download a Windows 32 or 64 bit release from https://nwjs.io/downloads/ and unzip the download.
Copy all files in the /src directory of the project into the root directory on the downloaded package. Your source files and package.json manifest file should be in the same directory as the nw.exe file.
The icon for nw.exe can be replaced with tools like Resource Hacker, nw-builder and node-winresourcer. (See below for Resource Hacker instructions.)

This is image title

Double click nw.exe to run the app.

Change the program’s icon with Resource Hacker

Windows uses icons of the .ico file type. Online converters exist that can generate an .ico file from another image type. For example ICOConvert at https://icoconvert.com/.

Download Resource Hacker from http://angusj.com/resourcehacker/ and install.
Start the Resource Hacker program.
Select File > Open… and select the nw.exe
In the left pane right-click the Icon folder and select Replace Icon…
Click ‘Open file with new icon…’ and select the assets/icons/metronome.ico file.
In the right pane select the icon to be replaced, usually the top one in the list.
Click the Replace button.
Click File > Save… to save the executable with the new icon.
Rename nw.exe to ‘metronome.exe’.

This is image title

More about Resource Hacker:

Installers

Create a Mac installer (.dmg file)

I’ve divided this section into two parts. The first is to create a reusable nice looking template for the installer that shows the app and a shortcut to Applications so users can easily add the app to the Applications directory.

The second part is the creation of the actual installer.

Create a template

This is image title

Start Disk Utility.
Go to File > New Image > Blank Image…
Set the file name of the the image to installerTemplate.dmg.
Choose a destination folder where to save the installer.
Name the image ‘metronome-installer’.
Select a size that’s enough for the size of the app, 320MB.
Leave the other fields as they are.
Click ‘Save’ to create the dmg file.
Double click installerTemplate.dmg to open it. It will show up in finder as a device.

That’s it for creating the template file. Now open the template and make it look nice:

In the Finder menu choose View > Show View Options.
Customize the look of the folder. Set it to Icon View, larger icons etc.
Copy metronome.app file into the folder.
Copy a shortcut toApplications into the folder.
Organize the icons within the folder.
Optionally make a background image for the folder that tells users to drag metronome.app into Applications. (Find it in /assets/mac/mac-installer-background.jpg.)
Eject the disk image.

Build the final DMG

This is image title

Start Disk Utility again.
Choose Images > Convert… from the menu.
Select InstallerTemplate.dmg just created.
Enter the name of the final image, metronome-installer_1.0.dmg.
Select Compressed as the Image Format.
Click ‘Save’ to create the dmg file.

DMG creation resources:

Create a Linux installer (.deb file)

I’ve used an easy to follow tutorial that you can find here: https://ubuntuforums.org/showthread.php?t=910717. The steps are as follows:

Create a file named control with information for package management tools like dpkg to manage the package. I’ve already added the file for this project in /assets/linux/.
Create a directory for the files to install that uses the naming convention <project>_<major version>.<minor version>-<package revision>. So here that’s metronome-installer_1.0.
Inside the folder create a file structure that represents the locations of the files to install. Just as in the manual install described above. See the example below:
Create the deb installer with dpkg-deb --build metronome-installer_1.0.

This is the directory and file structure:

+-- metronome-installer_1.0
|   +-- DEBIAN
|   |   +-- control
|   +-- usr
|   |   +-- share
|   |   |   +-- applications
|   |   |   |   +-- metronome.desktop
|   +-- opt
|   |   +-- metronome
|   |   |   +-- nw
|   |   |   +-- index.html
|   |   |   +-- package.json
|   |   |   +-- ... (and all the other files of the application)

This is image title

As mentioned, create the .deb file with:

dpkg-deb --build metronome-installer_1.0

The result is a file named metronome-installer_1.0.deb. The Metronome app can then be installed with:

sudo dpkg -i metronome-installer_1.0.deb

Another deb installer tutorial:

https://ubuntuforums.orgshowthread.php?t=910717

Create a Windows installer (.exe file)

INNO Setup is voted best here at Slant, so that’s what I decided to use.

Download Inno Setup from http://www.jrsoftware.org/isdl.php (The current version is innosetup-5.6.1.exe)
Install and start Inno Setup as usual for Windows applications.
In the Welcome window select to “Create a new script file using the Script Wizard”

For an overview of the wizard steps please have a look at this tutorial’s GitHub Readme, as this Medium post can’t show the nested list structure I used for the overview. Or read a tutorial with lots of helpful screenshots here.

After the wizard the Compiler window shows.
Click ‘Yes’ to compile the new script.
Save the Setup script so you can compile the installer in the future without having to go through this wizard again.

This is image title

The compiler will take a bit of time to create the installer, but you’ll be able to follow the process in the ‘Compiler Output’ pane of Inno Setup.

This is image title

The resulting installer is an .exe file that presents users with the installation procedure they’re familiar with.

INNO Setup resources:

And finally, some other articles that I found useful to get familiar with NW.js:

What is GEEK

Buddha Community

How to create JavaScript desktop programs with NW.js

Tanya Shields

1597747920

Creating a precise countdown with Vanilla JS

Image for post

On a recent technical interview I had for a big tech company, in one of the steps of the process I was asked the following:

Create a countdown from 1:30 to zero using plain javascript and HTML, and that’s all.

“Cool”, I said to myself, that’s something I can achieve easily. The total time I had to develop that was 45 minutes, which at first looked more than enough.

I started doing the simplest thing I could imagine, mimicking what a normal clock or countdown does: at each 1-second interval, we would decrease the value of the counter by 1 until the end of the 90-second period. This was the result:

const initialSeconds = 90;

let remainingSeconds;
/**
* Returns seconds in format mm:ss
* @param {Number} seconds
* @return {string}
*/
const formatMinutesSeconds = (seconds) => {
    const thisDate = new Date(seconds * 1000);
    return `${thisDate.getMinutes()}:${thisDate.getSeconds()}`;
};
/**
* Renders the remaining time in a format mm:ss
* @param {Number} seconds
*/
const renderCountdown = seconds => {
    const counterElement = document.getElementById('counter');
    const stringCounter = formatMinutesSeconds(seconds);
    counterElement.innerText = stringCounter;
};
/**
* Starts a countdown with the given seconds
* @param {Number} seconds
*/
const startCountdown = (seconds) => {
    remainingSeconds = seconds;
    setInterval(_ => {
        if (remainingSeconds > 0) {
            remainingSeconds--;
            renderCountdown(remainingSeconds);
        }
    }, 1000);
    renderCountdown(remainingSeconds);
};
startCountdown(initialSeconds);

As you can see, I used the native setInterval function to mimic a tick on a regular clock, and decreased the total amount of seconds by 1. By that time, around 10–15 minutes had passed and the interviewer told me:

Well done, but do you think it will be precise enough?

As you may know (or not), Javascript works with a single thread with no context switching, which in other words, means that functions are executed from the beginning until the end without interruptions, so, if there was another function somewhere taking a lot of time (let’s say a long for statement), it would cause some delays. Using a setInterval, will only guarantee that the callback function will be executed at least n seconds after the time is created, but if the Event Loop is busy at the moment of its completion, it will wait until it finishes all the previous tasks before running the code we want.

#js #vanilla-javascript #vanillajs #javascript-interview #javascript #programming

CSS Boss

1606912089

How to create a calculator using javascript - Pure JS tutorials |Web Tutorials

In this video I will tell you How to create a calculator using javascript very easily.

#how to build a simple calculator in javascript #how to create simple calculator using javascript #javascript calculator tutorial #javascript birthday calculator #calculator using javascript and html

Nina Diana

1571196640

How to create JavaScript desktop programs with NW.js

NW.js is a framework for building desktop applications with HTML, CSS, and JavaScript. It works by combining a JavaScript app with Node.js and Google’s Chromium browser engine into a single desktop program.

I’m a frontend developer with little experience in creating desktop applications and installers, so it took me some time to find all the details of how to set everything up. This tutorial is an overview of my findings. I hope it can help you to get started using NW.js and to create desktop programs and installers. I’ve written this tutorial using MacOS 10.14 (Mojave), Ubuntu 18.04 and Windows 10.

NW.js instead or Electron

Electron is the better known of the frameworks for creating native applications. I also found it easier to use. My app however relies on requestAnimationFrame for timing, and I couldn’t use Electron because of an issue in Chromium (the timer stops when the app window is hidden). In the end however NW.js is not that hard to use.

The ‘Metronome’ project

The app for this tutorial is a simple metronome. Useful for for musical timekeeping. It uses requestAnimationFrame and it generates sound, so it will be easy to demonstrate that with NW.js the requestAnimationFrame timer will keep going even if the app’s window is hidden behind others. See a demo of the app here: https://hisschemoller.github.io/nwjs-tutorial/src/.

Tutorial overview

There’s quite a lot to go through, so here’s an overview of what’s included in this tutorial:

Project setup to run it in the browser
Run NW.js directly from the command line
Create a Mac desktop program (.app file)
Create a Linux desktop program
Create a Windows desktop program (.exe file)
Create a Mac installer (.dmg file)
Create a Linux installer (.deb file)
Create a Windows installer (.exe file)

Project setup to run the app in the browser

Clone the Git repository for the tutorial at https://github.com/hisschemoller/nwjs-tutorial.

Install the dependencies as usual and start as defined in package.json.

yarn install
yarn start

The app will now be available at http://localhost:3000

This is image title

Open the URL in a browser and you’ll see a small counter display. Click the Play button. The counter increases and a short blip sounds at each counter increase.

Note that the metronome stops if you switch to another browser tab, or if the browser is completely hidden by other windows.

Run NW.js directly from the command line

During development an app can easily be tested within the NW framework from the command line. To set this up requires just a few steps:

Add the NW package as a dependency using NPM
Create a manifest file
Run the app in the NW framework

Add NW as an NPM package

Two flavors of NW exist: For development purposes there’s an SDK version which contains the Chrome developer tools. The regular version lacks the developer tools and because of that results in a smaller file size. To use the SDK version add -sdk to the version string.

Add NW as a devDependency in package.json_:_

"devDependencies": {
  "nw": "0.38.0-sdk"
}

Create a manifest file

NW needs a manifest file to run. The manifest file is a JSON file called package.json. So confusingly it’s named exactly the same as NPM’s package.json. The difference however is that the manifest file is located in the same directory as the app’s source files, while NPM’s package.json is at the root of the project.

+-- nwjs-tutorial
|   +-- package.json (NPM)
|   +-- src
|   |   +-- index.html
|   |   +-- package.json (NW manifest file)

As a bare minimum the manifest just needs the fields name and main for NW to run. The main field points NW to the app’s entry point, which in this case is index.html.

A lot more settings are possible however. a reference of all available options can be found in the NWjs Manifest Format Reference.

This is the manifest for the Metronome app:

{
  "name": "Metronome_manifest_name",
  "description": "A metronome app to keep time.",
  "main": "index.html",
  "chromium-args": "--disable-raf-throttling",
  "window": {
    "icon": "img/icon.png",
    "height": 240,
    "resizable": false,
    "width": 400,
    "title": "Metronome_manifest_window_title"
  }
}

Run the app in the NW framework

I’ve added a script in package.json to run NW, but it could as easily be started by just typing yarn nw in the command line.

"scripts": {
  "start-nw": "nw --disable-raf-throttling"
},

Once started, NW looks for the "main" field in package.json to find the app’s entry point, and looks for the manifest file in the same directory as the entry point. It then has all the data it needs to run the app.

Try running NW with and without the --disable-raf-throttling command line option and notice that with the option the metronome keeps running when the app is hidden.

Creating a desktop program with NW.js

To create a desktop program a build of NW can be downloaded from the nwjs.io download page at https://nwjs.io/downloads/. Builds are available in different flavors, for Mac, Linux and Windows, 32 or 64 bit, with or without the SDK option.

This is image title

In general to create a desktop program you will add the project’s source files to the downloaded NW build, and the resulting package is the program to distribute. There are differences however between Mac, Linux and Windows. NW.js has it’s own documentation here.

Create a Mac desktop program (.app file)

Download a Mac release from https://nwjs.io/downloads/ and unzip the download. The unzipped folder contains the file nwjs.app (among others).
Package all the files from the project’s /src directory into a zip file and rename the zip to app.nw. So, to be clear, the file extension will be .nw instead of .zip, and it will contain index.html, the css, js and fonts directories and the package.json manifest file.
Put app.nw inside the downloaded Mac release, in the nwjs.app/Contents/Resources/ directory. (right click on nwjs.app and choose ‘Show Package Contents’ to open it)
To add the app icons, rename /assets/icons/metronome.icns to app.icns and paste it into nwjs.app/Contents/Resources/. The file must replace the existing default icons. See below to create an .icns file.
Also overwrite nwjs.app/Contents/Resources/documents.icns with the .icns file.

This is image title

The file nwjs.app is now an executable that runs the app. It’s the only file you need, you can delete all the other files in the download. Rename the file to Metronome.app. Double click to run it.

Mac .icns file

On a Mac you can create an .icns file with the iconutil command line utility. Here are two tutorials:

On MacOS Mojave I created the icon files as described in the first tutorial and ran iconutil as described in the second one. That worked. A general overview of the steps:

Create all the required png images. (For this tutorial they’re in assets/icons/metronome.iconset).
Put all files in a folder and rename the folder so the name ends with .iconset. In this case metronome.iconset.
Start Terminal and cd to the directory where the .iconset is.
Run iconutil to generate the .icns file, like this:

iconutil -c icns metronome.iconset

Create a Linux desktop program

I have tested this on Ubuntu 18.04, but I don’t know in how far the process is different in other Linux distributions.

Download a Linux 32 or 64 bit release from https://nwjs.io/downloads/ and unzip the download.
Copy all files in the /src directory of the project into the root directory on the downloaded package. In my case it’s called nwjs-sdk-v0.38.0-linux-x64. So your source files and package.json manifest file will share the same directory with the nw file in the download.
Copy the /metronome.desktop file to the same root directory as the source files and manifest. See below for creating a .desktop file.

Linux .desktop file

In GNOME and other freedesktop.org-compliant desktops, an application gets registered into the desktop’s menus through a desktop entry, which is a text file with .desktop extension. This desktop file contains a listing of the configurations for your program.

The file should have a unique descriptive filename without spaces. For this project I use metronone.desktop. The location should be, to be accessible by everyone:

/usr/share/applications

Or, to be accessible to a single user:

/.local/share/applications

Some .desktop file resources:

Manually install on Linux

Download a Linux package and copy the source files, manifest and icon file as in the steps of ‘Create a Linux desktop program’ above.

Rename the package to metronome.
Copy the package to the /opt directory.
Copy the metronome.desktop file to /usr/share/applications.

To copy to the source files directory and the desktop file use the cp command with administrator rights in a terminal:

sudo cp -r /path/to/metronome /opt
sudo cp /path/to/metronome.desktop /usr/share/applications

This is image title

You will now be able to find and run the app just like any program you’ve installed. No restart or anything needed.

Create a Windows desktop program (.exe file)

Download a Windows 32 or 64 bit release from https://nwjs.io/downloads/ and unzip the download.
Copy all files in the /src directory of the project into the root directory on the downloaded package. Your source files and package.json manifest file should be in the same directory as the nw.exe file.
The icon for nw.exe can be replaced with tools like Resource Hacker, nw-builder and node-winresourcer. (See below for Resource Hacker instructions.)

This is image title

Double click nw.exe to run the app.

Change the program’s icon with Resource Hacker

Windows uses icons of the .ico file type. Online converters exist that can generate an .ico file from another image type. For example ICOConvert at https://icoconvert.com/.

Download Resource Hacker from http://angusj.com/resourcehacker/ and install.
Start the Resource Hacker program.
Select File > Open… and select the nw.exe
In the left pane right-click the Icon folder and select Replace Icon…
Click ‘Open file with new icon…’ and select the assets/icons/metronome.ico file.
In the right pane select the icon to be replaced, usually the top one in the list.
Click the Replace button.
Click File > Save… to save the executable with the new icon.
Rename nw.exe to ‘metronome.exe’.

This is image title

More about Resource Hacker:

Installers

Create a Mac installer (.dmg file)

I’ve divided this section into two parts. The first is to create a reusable nice looking template for the installer that shows the app and a shortcut to Applications so users can easily add the app to the Applications directory.

The second part is the creation of the actual installer.

Create a template

This is image title

Start Disk Utility.
Go to File > New Image > Blank Image…
Set the file name of the the image to installerTemplate.dmg.
Choose a destination folder where to save the installer.
Name the image ‘metronome-installer’.
Select a size that’s enough for the size of the app, 320MB.
Leave the other fields as they are.
Click ‘Save’ to create the dmg file.
Double click installerTemplate.dmg to open it. It will show up in finder as a device.

That’s it for creating the template file. Now open the template and make it look nice:

In the Finder menu choose View > Show View Options.
Customize the look of the folder. Set it to Icon View, larger icons etc.
Copy metronome.app file into the folder.
Copy a shortcut toApplications into the folder.
Organize the icons within the folder.
Optionally make a background image for the folder that tells users to drag metronome.app into Applications. (Find it in /assets/mac/mac-installer-background.jpg.)
Eject the disk image.

Build the final DMG

This is image title

Start Disk Utility again.
Choose Images > Convert… from the menu.
Select InstallerTemplate.dmg just created.
Enter the name of the final image, metronome-installer_1.0.dmg.
Select Compressed as the Image Format.
Click ‘Save’ to create the dmg file.

DMG creation resources:

Create a Linux installer (.deb file)

I’ve used an easy to follow tutorial that you can find here: https://ubuntuforums.org/showthread.php?t=910717. The steps are as follows:

Create a file named control with information for package management tools like dpkg to manage the package. I’ve already added the file for this project in /assets/linux/.
Create a directory for the files to install that uses the naming convention <project>_<major version>.<minor version>-<package revision>. So here that’s metronome-installer_1.0.
Inside the folder create a file structure that represents the locations of the files to install. Just as in the manual install described above. See the example below:
Create the deb installer with dpkg-deb --build metronome-installer_1.0.

This is the directory and file structure:

+-- metronome-installer_1.0
|   +-- DEBIAN
|   |   +-- control
|   +-- usr
|   |   +-- share
|   |   |   +-- applications
|   |   |   |   +-- metronome.desktop
|   +-- opt
|   |   +-- metronome
|   |   |   +-- nw
|   |   |   +-- index.html
|   |   |   +-- package.json
|   |   |   +-- ... (and all the other files of the application)

This is image title

As mentioned, create the .deb file with:

dpkg-deb --build metronome-installer_1.0

The result is a file named metronome-installer_1.0.deb. The Metronome app can then be installed with:

sudo dpkg -i metronome-installer_1.0.deb

Another deb installer tutorial:

https://ubuntuforums.orgshowthread.php?t=910717

Create a Windows installer (.exe file)

INNO Setup is voted best here at Slant, so that’s what I decided to use.

Download Inno Setup from http://www.jrsoftware.org/isdl.php (The current version is innosetup-5.6.1.exe)
Install and start Inno Setup as usual for Windows applications.
In the Welcome window select to “Create a new script file using the Script Wizard”

For an overview of the wizard steps please have a look at this tutorial’s GitHub Readme, as this Medium post can’t show the nested list structure I used for the overview. Or read a tutorial with lots of helpful screenshots here.

After the wizard the Compiler window shows.
Click ‘Yes’ to compile the new script.
Save the Setup script so you can compile the installer in the future without having to go through this wizard again.

This is image title

The compiler will take a bit of time to create the installer, but you’ll be able to follow the process in the ‘Compiler Output’ pane of Inno Setup.

This is image title

The resulting installer is an .exe file that presents users with the installation procedure they’re familiar with.

INNO Setup resources:

And finally, some other articles that I found useful to get familiar with NW.js:

Object-oriented Programming in JavaScript: Made Super Simple. DO NOT MISS!!!

Object-oriented programming in JavaScript: learn all about objects, prototypes, prototypical inheritance, this and more.
TABLE OF CONTENT:

00:00: What is OOP?
01:46: Four Pillars of OOP
08:50: Setting Up the Development Environment 11:07: Objects
11:53: Object Literals
14:58: Factories
17:50: Constructors
23:27: Constructor Property
25:53: Functions are Objects
31:09: Value vs Reference Types
37:00: Adding or Removing Properties
40:54: Enumerating Properties
43:45: Abstraction
47:48: Private Properties and Methods
51:55: Getters and Setters
57:32: Exercise
59:42: Solution

📺 The video in this post was made by Programming with Mosh
The origin of the article: https://www.youtube.com/watch?v=PFmuCDHHpwk&list=PLTjRvDozrdlxEIuOBZkMAK5uiqp8rHUax&index=3
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#javascript #object-oriented programming #object-oriented programming in javascript #object-oriented programming in javascript: made super simple

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

How to create JavaScript desktop programs with NW.js

NW.js instead or Electron

The ‘Metronome’ project

Tutorial overview

Project setup to run the app in the browser

Run NW.js directly from the command line

Add NW as an NPM package

Create a manifest file

Run the app in the NW framework

Creating a desktop program with NW.js

Create a Mac desktop program (.app file)

Mac .icns file

Create a Linux desktop program

Linux .desktop file

Manually install on Linux

Create a Windows desktop program (.exe file)

Change the program’s icon with Resource Hacker

Installers

Create a Mac installer (.dmg file)

Create a template

Build the final DMG

Create a Linux installer (.deb file)

Create a Windows installer (.exe file)

Recommended Reading

What is GEEK

Buddha Community

Creating a precise countdown with Vanilla JS

How to create a calculator using javascript - Pure JS tutorials |Web Tutorials

In this video I will tell you How to create a calculator using javascript very easily.

How to create JavaScript desktop programs with NW.js

NW.js instead or Electron

The ‘Metronome’ project

Tutorial overview

Project setup to run the app in the browser

Run NW.js directly from the command line

Add NW as an NPM package

Create a manifest file

Run the app in the NW framework

Creating a desktop program with NW.js

Create a Mac desktop program (.app file)

Mac .icns file

Create a Linux desktop program

Linux .desktop file

Manually install on Linux

Create a Windows desktop program (.exe file)

Change the program’s icon with Resource Hacker

Installers

Create a Mac installer (.dmg file)

Create a template

Build the final DMG

Create a Linux installer (.deb file)

Create a Windows installer (.exe file)

Recommended Reading

Object-oriented Programming in JavaScript: Made Super Simple. DO NOT MISS!!!

JS Development Company India | JavaScript Development Services