#Html to nw.js code

Also, the application has access to both the page as well as the computer’s resources, through an API to interact with the Operating System, allowing the code to interact not only with the front-end part of the application, but also the back-end part of the application (the computer in this case as no external server serves the desktop app). With an NW.js desktop app, because the user has explicitly executed the application and it is running in a local context, then the content security does not apply. In web applications, the back-end code is running from a server, and the page that is delivered to the browser on the user’s computer is limited as to what it can do on a user’s computer, due to the browser’s content security policy. The idea of front-end and back-end code existing and executing in the same place is the key concept to grasp here. This is unlike web frameworks where the front-end code and the back-end code traditionally exist and execute in separate places.

The example application above could load inside of a web browser without any modifications, but where NW.js differs from a web browser is that where an app.js file could only interact with the index.html’s contents in the context of a web browser, NW.js allows the app.js file to interact with the Operating System through a custom JavaScript API, as well as through Node.js. It looks for the package.json file, which points to the index.html file to load, and thus loads the web page into what looks like a web browser embedded inside of an application window. The NW.js application is able to load an application with a given path of the folder where the files live. It is required by NW.js for the application to load. This is the manifest file used by Node.js to load applications and libraries, and NW.js uses it to store configuration information about the desktop application. You’ll also notice a package.json file as well. There is also a CSS stylesheet for styling the contents of the index.html file, and an app.js file for executing JavaScript, in this case calling a simple dialog box with the text “from NW.js” inside of it. At this stage it’s identical to a website, and if you were to open it in a web browser it would work the same as it would in NW.js. The index.html web page is like most other web pages that you’ve seen - there is some HTML code for the page’s content, a link tag for the CSS stylesheet, and a script tag for the JavaScript.

In the example illustrated above, the application’s files resemble those of a simple web site.

Below is an example of how an example application works. These are things that can’t be done with a hosted web site, or even a locally hosted web site. This JavaScript API could control visual aspects like window dimensions, toolbar and menu items, as well as provide access to local files on the desktop. It was created by Roger Wang at Intel’s Open Source Technology Center in China, and worked by combining the Node.js programming framework with Chromium’s (then) browser engine - Webkit, hence the original name Node Webkit.īy combining Node.js with Chromium, Roger found a way to create applications that could not only load a local web site within an application window, but also could interact with the Operating System via a JavaScript API. NW.js is a framework for building desktop applications with HTML, CSS, and JavaScript.