Placeholder Image

Subtitles section Play video

  • - Working with node, oh we're almost done.

  • So the other thing that I do is I work a lot with node.

  • And I especially use different node packages

  • as utilities to run on the computer.

  • I also write node code,

  • but that's a separate topic for another tutorial,

  • but I write node code with the,

  • with a text editor and run commands

  • via the terminal and all that sort of stuff.

  • So let's come back,

  • here, and see.

  • Now, do I have node installed?

  • I'm going to just type node.

  • I know I have node installed because it gave me that prompt.

  • So this is how I can actually just type java script

  • in an interactive way.

  • Like I can say, let x equal five.

  • And then I can say x and it shows me five.

  • This is like an interactive console here.

  • And then I can just say, I think,

  • control c?

  • And I can get out of that.

  • Now.

  • I'm going to just go back to the desktop.

  • So I have node installed.

  • If you don't have node installed,

  • there are many different ways

  • you can install it but I think if you go to nodejs.org,

  • you can get it.

  • Now let's see what version I have,

  • this is probably going to be very embarrassing.

  • Oh, not so embarrassing!

  • 10.8.

  • So you can see, I'm a little bit behind

  • but then this is recommended.

  • But you know, live on the edge.

  • There obviously are key things in certain versions

  • most of the stuff that I'm doing, it doesn't matter so much.

  • So I have a fairly recent version,

  • now do I have something called npm?

  • Npm should come with node when you've installed it,

  • but just to be sure I'm going to type npm

  • and it looks like I have it 'cause it's not saying

  • it doesn't know what it is.

  • So npm is node pkg manager.

  • It's how I am going to install node packages.

  • And I'm going to show you something really important

  • right now.

  • So what I want to do first,

  • is let's use http server.

  • Http server is a way, actually,

  • yeah, let's use http server.

  • Http server is a node package for running a web server

  • from the console on your computer.

  • And you can use it for other things too.

  • So I want, normally a node package is something

  • a module that you install for a particular project

  • and it lives with that project.

  • I'm going to solve this globally because I want to use it

  • as a global utility on my computer.

  • But there's two, multiple kinds of global

  • that you might not be aware of.

  • So I'm going to now say,

  • npm install

  • what was it called?

  • Http server -g,

  • the -g for global.

  • And I know there's something called Yarn,

  • which is another way to install your package, but you know,

  • oh, I can't do everything new all the time!

  • So I'm going to hit enter,

  • and it's going to give me an error.

  • This error is so common.

  • And it's a permissions error, it's like,

  • I don't have authority to install something global

  • on your computer.

  • And you're going to be tempted to do this.

  • Sudo npm install http-server -g

  • what this means, sudo means super user do,

  • and it's saying, you know what, I do have permission,

  • I'm the administrator of this computer,

  • I want this to be global, across all users of the computer.

  • But that actually is probably not what you want.

  • What you more likely want is global packages but for you,

  • in your home user account.

  • It's a fine line but you're computer

  • has stuff installed in a like, really further,

  • further down the chain of file directories that are,

  • any user can use.

  • Like the applications, or it has configurations and things

  • for just the user that's logged in.

  • So there is a way to deal with this.

  • And the way to do that is,

  • I'm going to just look for fix permissions npm.

  • There's a guide for it on the npm website.

  • And it's, the way that I like to do this, is this.

  • So I want to make a hidden directory called npm global.

  • So I'm just going to copy this right from here.

  • And I'm going to put it in here.

  • Then I want to tell npm that

  • that's where I want my global packages to be.

  • Now here's the thing,

  • it's going to want me to add that to the path.

  • Because I'm adding something new that the computer needs

  • to know to look there to find things,

  • it needs to be part of the path.

  • But guess what?

  • Uh, maybe not .profile

  • this is the default bash profile.

  • Actually what I want to do is take this,

  • since I'm using zsh, but again,

  • and I want to say,

  • code .zshrc

  • so I want to edit this file,

  • and I'm going to add another thing,

  • I'm going to add it, the path here.

  • So it should be available.

  • And then I'm going to say source to reactivate it,

  • I only have to do this once.

  • Or I could restart terminal.

  • And then now I should be, that's a little variation of this.

  • That's what, that's the equivalent of this.

  • And now, I should be able to say

  • without sudo, no sudo,

  • do this

  • install and look it did it and guess what?

  • I'm going to go to the finder,

  • I'm going to look here, there's a new hidden directory

  • called npm global, bin, http server, lib,

  • this is where it lives.

  • So a lot of times this stuff seems like magic,

  • it's just putting more files on your computer

  • and then telling you about where they are

  • and then you have,

  • and staving where that stuff is in the path variable.

  • Okay.

  • So now we've got http server,

  • this means that I can just run http server,

  • there you go,

  • I'm running a server, I'll show you why I want to do that

  • in a second.

  • But instead, I'm going to,

  • the next thing I'm going to do is going to do npm install

  • p5 manager -g.

  • So this is installing p5 manager.

  • Take a little second there.

  • Okay, installed,

  • and now

  • now I can do things like, p5 generate

  • - -bundle mysketch

  • or something so I can create a p5 sketch.

  • And it actually just created all of these files.

  • I can go cd mysketch.

  • Now the truth of the matter is p5, the p5 manager

  • comes with it's own server.

  • But, for whatever weird reason, I'm just used to using

  • http server.

  • If I hit command and I click on this,

  • it will open it in the browser and there's the sketch.

  • Now there's nothing appearing so maybe I want to edit it.

  • Now how's another thing I want to show you.

  • (laughs)

  • I got the server running here,

  • so ah, I don't want to stop the server

  • but I want to do more stuff

  • in the console.

  • I can hit command T and that opens a new tab.

  • But I'm not in the same directory,

  • so if I want to be in the same directory,

  • I'm going to go to preferences again,

  • and I'm going to go to profiles under default

  • and I could create different profiles

  • with different settings,

  • but this is what I want.

  • I want to reuse previous session's directory.

  • So if I click that,