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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Package Your App

In this lesson, you’ll learn how to take your existing web app and bundle it with NW.js so that it runs as a Mac app. By the end of this lesson you’ll have a fully operational Mac app up and running—just like that!

Related Links

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.

Back to the top