Intro
Inspired by the Action Retro YouTube channel trying to get Spotify to run on Windows XP, I thought I'd share a quick walk through of using NW.js for Windows XP development.
NW.js is a modified Chromium browser with Node.js built in. It has an older "Long Term Support" (LTS) release (v0.14.7) that supports "Legacy Operating Systems", like Windows XP and OSX 10.6.
However, it is pretty old at this point and has some caveats. But we'll get there.
Boot up XP
First off I'm going to boot up my old Win Pro SP3 virtual machine. I'd recommend setting up your own, there are guides online for that, or just using real hardware.
Download NW.js
Go to this archive for version 0.14.7:
I'll explain the different flavors:
- "nwjs-sdk-symbol*" and "nwjs-symbol*" files are for advanced use cases, you won't need these.
- "nwjs-sdk-v0.14.7*" Is NW.js with Chromium dev tools built in
- "nwjs-v0.14.7*" Is the same thing, just without the dev tools, so it is slightly smaller. This is for distribution to end users
- Then they'll have the operating system (win, lin, osx)
- And then the architecture, 32-Bit (ia32) and 64-Bit (x64)
I assume you'll want nwjs-sdk-v0.14.7-win-ia32.zip. But if you plan on distributing this for others to download, they probably won't need the dev tools, so you can use the slightly smaller version for them.
The 32-bit version will run on both 32 and 64-bit versions of Windows just fine. It will also run on XP, Vista, 7, 8, 8.1, 10, 11, and 12, and likely anything else in the future as Microsoft has always prioritized backwards compatibility. But who knows, 11 and 12 are so bad I wouldn't be surprised at what they do anymore. Honestly, having to use 11 so much recently and then booting up this XP VM is just pissing me off at much better XP is.
Setting it up
You downloaded a zip file, good job! You should be able to open it and drag the folder out to your desktop or wherever. Feel free to rename the folder from "nwjs-sdk-v0.14.7-win-ia32" to "MyApp" or whatever.
Inside the folder is all the files NW.js needs to run, it doesn't need installed, it works sort of like a portable app. So you can just double-click on nw.exe to see a window pop up, then you can close the window.
The nw.exe file can be renamed to whatever you want, MyApp.exe for example, and you can even use a tool like ResourceHacker to edit it and change the icon to any ICO file you want. You can grab a random ICO file from the IconArchive website, or use a tool like Greenfish Icon Editor to convert any image file to an ICO. All of that runs fine on Windows XP+.
Creating an app
Inside your "MyApp" folder, create a new folder called package.nw. All of your code and files will live inside this folder. Which makes it easy to copy it around to other versions of NW.js later. As long as the package.nw folder is next to the nw.exe (or whatever you renamed it to), it will work.
Then, inside the package.nw folder create a package.json file. This is the first thing the nw.exe file will look for when it launches. It tells it what to do next. Inside the file there are only 2 required fields so we'll start with those:
-
name- This is the name of your app. It is required because any time you open NW.js, Chromium will control showing a window, and Chromium needs to make a bunch of user-specific files. So for Windows XP that would be atC:\Documents and Settings\YourUserName\Local Settings\Application Data\my-app. The "my-app" part is whatever you put in thisnamefield. It must be a url and file-system safe name. I'd recommend all lowercase and hyphens instead of spaces. -
main- This tells NW.js what to load in the window when it launches. Usually you'd set it toindex.htmland then create that file and put whatever you want in it to make your app. However you can also set it to a URL, so we'll start there, as it will show an XP specific problem we'll need to solve.
MyApp\package.nw\package.json
{
"name": "my-app",
"main": "https://google.com"
}
With that in place, now when you run nw.exe, it will open a window and take you to Google.com. Or at least, that's what it would do, but instead you'll see this:
Chromium dropped support for XP a long time ago. So we must use a very old version that still works with XP. However, the certificate it ships with is now long expired.
We can work around this by adding one more item to the package.json file:
{
"name": "my-app",
"main": "https://google.com",
"chromium-args": "--ignore-certificate-errors"
}
Save that, and re-run nw.exe and now it should launch a window with Google loaded inside it.
There are a bunch of other settings you can put in the package.json, including adjusting the starting window size and position. More information can be found in the docs:
Version stuff
At this point you can make whatever you want. Well kind of. NW.js v0.14.7 was released on 2016-07-22 and comes with Chromium 50 and Node.js 5.11.1. Both of these are very old now. If you are used to modern webdev tooling, writing code for them will be more difficult.
Fortunately we have tools like PostCSS and Babel, that let you target your specific Browser version, and they'll do their best to transpile and polyfill your code to work with that version. This alone will do a lot of the heavy lifting for you if you are working with a lot of code. However, if you are just writing out a few HTML, CSS, and JS files, then that would be overkill and you can just figure out what code to use by consulting CanIUse.com.
Be aware, that many new web technologies have been added to the browser since 2016. Some specific websites, may not load. For example, using "main": "https://spotify.com" will load their site, but it will tell you that your browser doesn't support Widevine. Widevine is a DRM technology they use for playing audio files that wasn't added into Chromium until years after they dropped support for XP. So sadly, you can't just point to any website and expect it to work. Though, most sites actually still work with this older version of Chromium, overtime more and more will adopt new technologies not available in this old version of Chromium. The march of progress is sad for our friend XP. Fortunately, for just browsing the web MyPal, an XP focused fork of Firefox, is available.
Your own app
In the example above we just loaded a website, but as mentioned, you can also create your own apps from scratch. Let's do a quick example.
MyApp\package.nw\package.json
{
"name": "my-app",
"main": "index.html",
"chromium-args": "--ignore-certificate-errors"
}
MyApp\package.nw\index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<style>
body {
background: #334;
color: #DDE;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div id="example"></div>
<script>
const fs = require('fs');
const files = fs.readdirSync('.');
document.getElementById('example').innerText = files.join(', ');
</script>
</body>
</html>
In this example code we are:
- Styling the app with CSS
- Setting the window title with the
<title>tag - Use Node.js's
requirefunction to access the computer's File System (fs) - Using
fsto get a list of all the items in the current directory (.) - Targeting an element in the DOM by ID and updating its inner text value to be the list of comma-separated files.
You will be able to use any of the built-in Node modules, or any 3rd party modules you would npm install that are compatible with Node.js v5.11.1 (basically stuff from around 2013-2017).
But just using the built-ins alone, you have access to the hardware (CPU, memory, etc), file system (Read/Write/Create/Delete files), executables (child processes, spawns, forks), and more.
The cool part is, if your app code doesn't use any windows specific code (like calling powershell or something), then it will be possible to ship your app on Linux and OSX too!
Installing Node
Installing Node.js on your machine is not a requirement for using NW.js. If you want to use 3rd party Node modules, you will need to install them via the "Node Package Manager", or npm. Node.js comes with npm when installed. Most likely all you'll need to do is download and run this installer:
Run it to globally install the same version of Node.js (5.11.1) that is built in to NW.js (0.14.7). You'll run into less issues if they match.
If you have issues installing Node, you can look into the other Node downloads for that version:
Or you can try Volta. Which I've gotten to work on XP in the past, but don't know how. Volta is a Node version manager that works on all platforms and is really great.
Also, depending on the updates you've done to your XP machine, you may be on an older version of "Windows Installer". You can check by running msiexec to see the version. If you want to install version 4.5, just go to Microsoft's website and, ha ha, just kidding, that will take you to a 404 page. So instead, go to The Internet Archive to get the update. Then donate to them.
Distributing your app
When you are ready to share your app with other cool XP users, just zip up your MyApp folder and send it to them. It's that easy. Then they just unzip it and double click on the nw.exe (which you probably renamed). Or you can download the non-sdk version of NW.js and move your package.nw folder over to get a slightly smaller file size. Then zip and ship it.
There are other options too. Another one is to use WinRAR to create a self-extracting executable (google a tutorial). That will make a small installer file for your app.
Conclusion
Have fun making apps!
Check out NW Utils for additional NW.js resources (libraries, tutorials, boilerplates, examples, etc).
Here's an old XP compatible NW.js framework for making GUIs for CLI's:
Top comments (0)