How it works...

After doing this setup, building the app is essentially trivial. Just do the following, and all the distributable files will be found in the dist/ directory:

npm run electron-builder

You may want to add a new line to the .gitignore file so that the distribution directory won't be committed. I included a **/dist line to mine, paralleling the previous **/node_modules and **/dist existing lines.

Now that we have the Linux app, we can run it by unzipping the .zip file and clicking on the chapter13 executable. (The name came from the "name" attribute in package.json, which we modified earlier.) The result should be like what's shown in the following screenshot:

The Linux executable runs as a native app, showing the same screen as we saw earlier

I also wanted to try out the Windows EXE file. Since I didn't have a Windows machine, I made do by downloading a free VirtualBox virtual machine from https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/—they only work for 90 days, but I needed it for just a few minutes.

After downloading the virtual machine, setting it up in VirtualBox, and finally running it, the result that was produced was the same as for Linux, as shown in the following screenshot:

Our native Windows app runs equally in a Windows machine

So, we've managed to develop a React app, enhanced it with the Node and Electron features, and finally packaged it for different operating systems. With that, we are done!

Table of Contents for How it works...

Create new playlist

Sign In

Sign Up

Table of Contents for
How it works...