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

2.2 Edit the Manifest

Now that your Mac app is running, it’s time to make a few tweaks. In this lesson you’ll learn how to change your app’s manifest (package.json) to control the appearance of the app when it runs.

Related Links

2.2 Edit the Manifest

Hey, this is Kezz Bracey. Welcome back to Web App to Mac App using NWJS. In the last lesson we took care of making your web app actually run as a Mac desktop app, and that was pretty straightforward. We got through that pretty quickly, but there are still a couple more things that you need to do to get your app ship-shape and ready to be shared with other people. And the first thing you're gonna need to do is edit your manifest files. So that's the package.json file that we created in the last lesson in the app.nw folder of your app. What we're looking on the screen here are the NWJS docs for working with the manifest file. And there are a whole lot of different things that you can control by adding settings into your package.json file. This Quick Start section in the docs here shows you an example of what a manifest file might look like. And, I highly recommend going through this page, and just browsing through some of the different things that you can control with the settings that are available here. Okay so, let's have another look at our app, and see what we might need to change, by editing our manifest file. So first up, you can see that along the top we've got forward and back buttons, refresh buttons, and so on, all the type of things that you might expect to see in the top of a browser. And that's because, effectively, this is a browser. The way the NWJS works is to ship a browser inside the app, and that browser is what runs your web app and allows it to be used on the desktop. But we don't want this to look like a browser, we want it to look like a regular desktop app, so we want to get rid of that toolbar area. And the other thing is that right now this app is a little bit too small when it first opens up. It's not quite wide or high enough, but we want to make sure we give people lots of space to work with as they move around inside the app. So, once again, we're going to go into our app by going to Show Package Contents. And then inside our app.nw folder. We wanna find the package.json file, and open that up for editing. So here's our current manifest file, and this just has that Quick Start card, that we added in in the last lesson. So we're gonna add in a little bit more to this file. First up, we're gonna add in a setting named window, and then we're just going to nest an object under that. Inside that object, we're gonna add toolbar, and we're gonna set that to false. And that's gonna get rid of that browser toolbar area at the top of our app. Next up, we're gonna change the width. And we're gonna set the width to something a little bigger. We'll go with 1280. And then finally we're gonna change the height. And we're gonna change that to 768. 1280x768 is a very common resolution, so we can be pretty confident that on most monitors this is gonna fit quite snugly. So now we'll save our updated package.json file. So just quickly before we demonstrate the changes that have been made by our manifest editing. I wanna point out that the video you've been watching so far has been recorded at a resolution of 1280x800. And I've actually just increased that resolution to make sure that there's enough space in the video for you to see the size that the app will now appear on a typical desktop monitor. And another thing that you might wanna be aware of is that when you edit your manifest file inside your app. Sometimes the first time you run it you might not see the changes, you might have to close it down, and then run it a second time to see the changes. Okay, so once again, we'll run our app. And as you can see, that hasn't changed anything yet, so we'll just close that down, and we'll do it once more. And there we go. So, now our toolbar area is gone along the top, everything just looks like a regular desktop app. And now, instead of opening up at that much smaller size, we have it coming up at a size of 1280x768. And of course, you can change that height and width figure depending on what you think is going to be the best fit for the people who are going to be using your apps. So as I mentioned earlier, I definitely recommend having a good read through the docs for the manifest file and really getting a grasp on all the things that you can change by editing your manifest file, like we just did. Now in the next lesson, what we're gonna do is add a custom name and a custom icon to our app. So up in the top left corner here, you can see that the name of our app is still showing up as nwjs, but we want to customize that so it has whatever name we want to give the app. And then down in the doc, you'll see that the icon for our app right now is just the default nwjs compass icon. But we want to replace that with something of our own. And you'll learn how to do both of these things in the next lesson. I'll see you there.

Back to the top