- 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,
and then I close it, and I hit,
now I hit command t for a new tab,
there we go, I'm still in mysketch.
I can do code dot.
I've now, I'm now looking at mysketch in visual studio code.
I will add background 255, 0, 100
it will auto format it when I hit save,
and then I'm going to come back here and hit refresh.
Oh no!
Where's the new code?
So this is really a key thing.
Browsers want to cache, all the time.
So there's many ways around this, but,
and by the way, didn't even show you,
you might look like this for you,
I did something without even thinking about it.
I always while I'm working,
like too have the developer tools open,
View, developer, JavaScript console.
I usually open it by doing option command J
and there it is.
And then I want to make that font bigger so you can see it.
But there's a really important setting
that is really going to help you out.
Settings, and I can go down under network,
I like this one.
Disable cache while DevTools are open.
So this'll mean it'll always reload any changes
in your code, while you have those DevTools open,
the browser won't cache it by accident.
So now if I select that,
and I hit, if I hit refresh here,
there we go, we've got the P5 sketch.
Now here's the thing.
What if you want to just, now so if I change it,
100, 255.
I've got to go back into the browser and hit refresh.
Which is fine, I don't mind doing that.
But!
I could also
control c out of http server,
I could say npm install live-server -g,
this is a different server package,
and again I'm sure visual studio code has plug in,
has extensions for running servers so you don't have,
there are so many different ways of doing this,
no one way is correct.
But now if I do live server,
'cause it launched it automatically, and then
if I change the code 255, 0, 100 hit save,
hmm, let's see.
It detected it,
I wonder why it didn't change.
Did I not hit save?
I've seen this happen before.
If I hit refresh, oh live, maybe live reload enabled
didn't get enabled.
Let me see.
But let me try this again.
I don't know why that didn't work.
And I'm going to say 100, 0, 255.
Hit save.
And it changed.
Yes, so we can actually if I were more thoughtful about this
and put this over here,
and put this here,
so you can kind of see it,
you can see it's just changing every time I hit save.
I know I'm standing in front of the code,
but that's it's going to update dynamically.
So that's something that can be useful
if you want it to live reload.
All the time.
Alright,
so this is pretty much my entire workflow,
I think this, I would like to make a video about
setting up virtual environment for Python,
I'll come back to that,
I'm going to use that for some projects in the future.
But this is pretty much everything I use.
So many things are missing, so many people in the chat
are like posting their suggestions or like,
this text editor, or this thing called tmx maybe
is really good for zsh.
So I encourage you to put all that stuff in the comments
of these videos
and maybe we can make a read me file
that people can contribute to,
but this is basically it.
Most of the time I try to use these all in one
kind of packages for coding.
I would also mention Glitch
which allows you to do node stuff as well
Glitch.com is a great one, OpenProcessing is a great one.
But when I'm working locally on the computer,
I use a text editor, I'm trying to use visual studio code,
I need console access to run shell commands,
I'm using iTerm with a zsh, configure with the oh-my-zsh
I do all my git commands there,
I do all my node commands there,
I use these node global packages,
and there's one other thing I thought of,
so the one other thing I thought of is actually
this p5 manager
I often, what you'll notice when it created this sketch,
it made, it had like setup and draw in it,
it had some stuff in index in html already,
this is a template that you can modify.
So you can actually go in by the way,
you can find it now,
p5 manager, probably somewhere in here
is the, no this is the source code for it,
generator, libraries, templates,
ah there we go!
Look, so this is the template,
so I could actually modify this
and I could probably make different templates,
you'd have to look in the documentation,
where do you find out about node packages?
You know, google them you'll find the Github repo,
or there's a, every node package is at
npmjs.org,
so if I were to search for a p5 manager,
I have some videos on p5 manager itself,
we could find out here that there is more documentation
for all the different things you can do with it.
So everything to infinity,
I could keep going about all these things,
one of the question, sorry, one other question in the chat
how is opening server url different
from opening an html file?
This is a great question, I'm glad you asked that.
Those of you actually somehow managing to watch til the end
of this video are going to get a little bonus here.
Right this mysketch, I can just click this index on html
and there it is in the browser also.
And I can open up here,
but there it is running, but this is dangerous.
Living dangerously is not the worst idea.
File users temporary train.
I'm opening it through the file system.
A lot of things don't work.
I would expect that webcam access,
access to to the microphone, loading image files won't work,
there'll be all these errors
because it's not hosted properly
through a server.
And so you'll notice here,
the sketch is hosted through a server,
and so this is going to,
it's just safer and it sort of emulates that real experience
of publishing your project to the web somewhere.
So generally I try to stick to that habit,
but you're right, for quick working, just opening it as a,
as through the file system will work.
Okay,
thank you everybody for watching this series of videos
about my current workflow,
it's a little weird to make this before I actually start
using the workflow more
but so things will change, and if you can watch
my videos, ask your questions, thank you,
(kisses the air)
I kiss my fingers like a chef,
good by from The Coding Train.
(whistle toot)
(upbeat music)