Internationalization, often abbreviated as i18n, implies a particular software design capable of adapting to the requirements of target local markets. In other words, if we want to distribute our application to markets other than the USA, we need to take care of translations, formatting of datetime, numbers, addresses, and such.

Internationalization is a cross-cutting concern. When you are changing the locale, it usually affects multiple modules. So, I suggest going with the observer pattern that we already examined while working on DirService:
./js/Service/I18n.js

const EventEmitter = require( "events" ); 
 
class I18nService extends EventEmitter { 
  constructor...

Well, with our application, we can already navigate through the filesystem and open files, yet one might expect more of a File Explorer. We can add some file-related actions, such as delete and copy/paste. Usually, these tasks are available via the context menu, which gives us a good opportunity to examine how to make it with NW.js. With the environment integration API, we can create an instance of system menu (http://docs.nwjs.io/en/latest/References/Menu/). Then, we compose objects representing menu items and attach them to the menu instance (http://docs.nwjs.io/en/latest/References/MenuItem/). This menu can be shown in an arbitrary position:

const menu = new nw.Menu(), 
      menutItem = new nw.MenuItem({ 
        label: "Say hello", 
        

click: () => console.log( "hello!" ) 
      }); 
 
menu.append( menu ); 
menu.popup( 10, 10 );

Yet, our...

Usually, the copy/paste functionality involves system clipboard. NW.js provides an API to control it (http://docs.nwjs.io/en/latest/References/Clipboard/). Unfortunately, it's quite limited; we cannot transfer an arbitrary file between applications, which you may expect of a file manager. Yet, some things are still available to us.

In order to examine text transferring with the clipboard, we modify the method copy of FileService:

copy( file ){ 
    this.copiedFile = this.dir.getFile( file ); 
    const clipboard = nw.Clipboard.get(); 


    clipboard.set( this.copiedFile, "text" ); 
}

What does it do? As soon as we obtain the file full path, we create an instance of nw.Clipboard...

All three platforms available for our application have a so-called system notification area, which is also known as the system tray. That's a part of the user interface (in the bottom-right corner on Windows and top-right corner on other platforms) where you can find the application icon even when it's not present on the desktop. Using the NW.js API (http://docs.nwjs.io/en/latest/References/Tray/), we can provide our application with an icon and drop-down menu in the tray, but we do not have any icon yet. So, I have created the icon.png image with the text Fe and saved it in the application root in the size of 32x32px. It is supported on Linux, Windows, and macOS. However, in Linux, we can go with a better resolution, so I have placed the 48x48px version next to it.

Our application in the tray will be represented by TrayService:

./js/View/Tray...

Other file managers usually accept command-line options. For example, you can specify a folder when launching Windows Explorer. It also responds to various switches. Let's say that you can give it switch /e, and Explorer will open the folder in expanded mode.

NW.js reveals command-line options as an array of strings in nw.App.argv. So, we can change the code of the DirService initialization in the main module:

./js/app.js

const dirService = new DirService( nw.App.argv[ 0 ] );

Now, we can open a specified folder in the File Explorer straight from the command line:

npm start ~/Sandbox

In UNIX-based systems, the tilde means user home directory. The equivalent in Windows will be as follows:

npm start %USERPROFILE%Sandbox

What else can we do? Just for a showcase, I suggest implementing the --minimize and --maximize options that switch the application window...

Nowadays, one can find plenty of native desktop applications with semi-transparent background or with round corners. Can we achieve such fancy look with NW.js? Sure we can! First, we shall edit our application manifest file:

./package.json

... 
"window": { 
    "frame": false, 
    "transparent": true, 
    ... 
  }, 
...

By setting the frame field to false, we instruct NW.js to not show the window frame, but its contents. Fortunately, we have already implemented custom windowing controls as the default ones will not be available anymore. With a transparent field, we remove the opacity of the application window. To see it in action, we edit the CSS definitions module:

./assets/css/Base/definitions.css

:root { 
  --titlebar-bg-color: rgba(45, 45, 45, 0.7); 
  --titlebar-fg-color: #dcdcdc; 
  --dirlist-

bg-color: rgba(222, 222, 222, 0...

Unlike in native applications, our source code isn't compiled and is therefore open to everybody. If you have any commercial use of this fact in mind, it is unlikely to suit you. The least you can do is to obfuscate the source code, for example, using Jscrambler (https://jscrambler.com/en/). On the other hand, we can compile our sources into native code and load it with NW.js instead of JavaScript. For that, we need to separate JavaScript from the application bundle. Let's create the app folder and move everything except js there. The js folder will be moved into a newly created directory, src:

    .
    ├── app
    │   

└── assets
    │       └── css
    

│           ├── Base
    │           └── 

Component
    └...

Well, we have completed our application and that is the time to think about distribution. As you understand, asking our users to install Node.js and type npm start from the command line will not be friendly. Users will expect a package that can be started as simply as any other software. So, we have to bundle our application along with NW.js for every target platform. Here, nwjs-builder comes in handy (https://github.com/evshiron/nwjs-builder).

So, we install the npm i -D nwjs-builder tool and add a task to the manifest:

./package.json

//... 
"scripts": { 
    "package": "nwb nwbuild -v 0.21.3-sdk ./app -o ./dist  -p linux64, win32,osx64", 


    //...   
  },
 //...

Here, we specified three target platforms (-p linux64, win32,osx64) at once and thus, after running this task (npm run package), we get platform-specific subfolders in the dist...

In the era of continuous deployment, new releases are issued pretty often. As developers, we have to ensure that users receive the updates transparently, without going through the download/install routine. With the traditional web application, it's taken for granted. Users hit the page and the latest version gets loaded. With desktop applications, we need to deliver the update. Unfortunately, NW.js doesn't provide any built-in facilities to handle autoupdates, but we can trick it; let's see how.

First of all, we need a simple release server. Let's give it a folder (for example, server) and create the manifest file there:

./server/package.json

{ 
  "name": "release-server", 
  "version": "1.0.0", 
  "packages": { 
    "linux64": { 
     "url": "http://localhost:8080/releases/file...

In the beginning of this chapter, our File Explorer could only navigate the filesystem and open files. We extended it to show a file in the folder, and to copy/paste and delete files. We exploited the NW.js API to provide the files with the dynamically-built context menu. We learned to exchange text and images between applications using system clipboard. We made our File Explorer support diverse command-line options. We provided support for internalization and localization, and examined the protection of the sources through compilation in the native code. We went through the packaging process and prepared for distribution. Finally, we set up a release server and extended the File Explorer with a service for autoupdating.