Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Web App to Mac App With NW.js

Introduction

00:51
  • Overview
  • Transcript

If you're used to developing with web technologies, it's hard to go back to developing with OS-specific languages and APIs. What's worse, if you want to develop for multiple desktop platforms, you might need to use completely different language for each version of your software. Well, now you don't have to!

Creating desktop apps is now easier than ever before. NW.js gives you the ability to take any web app and turn it into a desktop app with just a few steps. You can keep using the web languages and workflows that you're used to, while still delivering a desktop native experience to your users. In this course, Envato Tuts+ instructor Kezz Bracey will teach you how to take an existing web-based task manager app, and turn it into a Mac desktop app using NW.js.

1. Introduction

1.1 Introduction

In the past, if you wanted to create desktop software for the Mac or any other platform you had to create some pretty hardcore coding skills. But now, if you have web development skills, creating desktop software is fully accessible to you. And the reason is, it's now possible to take a web app and turn it into a desktop app with just a few steps. In this course we're gonna be taking a web app that we created in a previous course and this is gonna be a Task Manager app. And we're gonna use NWJS to turn that web app into a fully functioning Mac desktop app. Now once you see how straightforward these steps are, and how quickly you can move through them, this is gonna open up a whole new world of opportunities for you. So let's jump right in and learn how to convert a web app to Mac app using NWJS.

2. Creating a Desktop App

2.1 Package Your App

Hey, Candace Bracey. Welcome to Web App to Mac App using NWJS. In this first lesson of this short course we're gonna show you how to take a web app that you've previously built and bundle it up using NWJS so that it will run as a Mac desktop app. Now the pre built web app that we're gonna be using is the task manager app that's created in the course Up and Running with Foundation for Apps, and I'll give you a link for that course in the notes below this video. You don't need to have taken that course in order to this course, we'll give you all the source files that you need in order to be able to go through this course. But if you have already done that course, then this give you an extra way to deploy what you learned how to create there. So what you're looking at on the screen here is two things. You'll see a folder here that says Mac App, and in there you'll see an app named nwjs. Now this is just the pre-built binary that you can download from NWJS's GitHub page. You can get a 32-bit pre built app, and a 64-bit pre built app, and I'll give you links for those in the notes below. And then you have this folder named Web App, and here are all the files that comprise our fully functional web app. For the process of turning this web app into a Mac app is a lot more straightforward than you might imagine,all you need to do is this. Begin by making a copy of all the files that comprise your web app. Then with your pre-built NWJS Mac app, you're gonna right-click and go Show Package Contents. Now this is all the files that make up this pre-built app. So you wanna go into the Resources folder and from here, you wanna create a new folder and call it app.nw. Now we just make sure that that's nested inside the Resources folder. Now we'll go into that folder and we're gonna paste in all our files. Now we're just gonna need to add one extra file in order for this web app to work inside our Mac app, and that is a manifest file. So we're gonna need to create a new file, a JSON file and we're gonna name it package.json, and then open up that file for editing. And this manifest is gonna let NWJS know what the main file in our app is. And in our case we want the index.html file to be run when this app is run. Now I'm actually gonna fill this file in with code from the NWJS quick start code, and that is on their main GitHub page. And I'll give you a link to that in notes below. And that code is this. So we're just giving our app a name, a version number, and telling it that the main file that we wanted to work with is index.html. So then go ahead and save your package.json. So now, our app is ready to go. So we just go up a few levels, until we're back up at the top level here, where we can see our nwjs app, and then we can right-click and hit Open to run it. And just like that, there's a fully functioning Mac app. And the functionality that you built into your web app will now work in exactly the same way, but it will do so in the context of a desktop app. So that gets the essential functionality out of the way that quickly. But there are still more steps that you're gonna need to take in order to get this app into a place where you'd be happy to share it with other people. So in the next lesson, we're going to start going onto those steps. Beginning with editing the apps manifest, so its package.json file. So I'll see you in the next lesson.