Installing canvas-sketch-cli

[00:00:02]
>> Mathew DesLauriers: So, if you guys would all open up your terminal or your command line application, and we'll try and all install this together. First thing would be to just make sure that you have the right version of Node and the right version of npm. I'm not gonna make that bigger.

[00:00:21]
It doesn't need to be six, it can five for npm. And then we're gonna install the command line tool globally. So we're gonna use npm install canvas-sketch-cli, which stands for command line interface, then we can do -g or --global. It just means let's install the tool globally so that we can use it again from our command line.

[00:00:50]
And it's gonna take a little while to install cuz it has a whole ton of dependencies in it, and I went kinda liberal on the dependencies. I'm still working to make it a bit faster. Hey what's up?
>> Speaker 2: They just need node over Version 8, right?
>> Mathew DesLauriers: Yes, 8 or above, that's all.

[00:01:09]
>> Mathew DesLauriers: And hopefully it will all install for you guys. And just, it might take a minute or two, but once it installs, I think the best way for us to test it out and to start using it is just to go to somewhere like your desktop or your documents and I'm just going to go to my desktop.

[00:01:28]
I'm going to create a new folder using rmkdir and when we work with the Canvas Sketch tool, we generally want to start in an empty folder because it will scaffold some stuff in that folder. So I'm just gonna call it shaders, or you can call it whatever you want, genart, or something like that.

[00:01:49]
Maybe I'll call it genart and then we move into the folder.
>> Mathew DesLauriers: And here, to test the tool out, you can just type in canvas sketch. So the tools is canvas-sketch-cli, but It will set you up with a command called canvas-sketch. When you run it without any arguments, it's gonna give you an error, because the idea of the tool is you pass in a file name like sketch.js, and it's a JavaScript file and it will run on that file.

[00:02:19]
But because we don't have a sketch.js file in our folder, and I'll just open the folder here in Mac. So you can see it's empty. It's gonna give us an error as well. So what we're gonna do is we're gonna create a new file. And if you use the flag --new, that's gonna scaffold out a new JavaScript file using a template for this kinda stuff.

[00:02:42]
And then we're also gonna use the flag --open and that's gonna launch the browser immediately when we do that. So what it'll do is it's gonna write this new file, there's a whole bunch of things. It writes this file that we're saying is scaffolded. It also creates a package JSON which is gonna hold the dependencies that our project needs and as we go today, we're gonna start to install more dependencies.

[00:03:08]
It has this package-lock json, which is just gonna lock down all the versions of our dependencies, and has node modules, which is actually just all the dependencies we need for our project today. So, if everyone could try doing that and if there's any issues. If you guys run into any problems, just raise your hand.

[00:03:27]
Yep?
>> Speaker 2: Was that a NPM module?
>> Mathew DesLauriers: Yeah, so what you can do is I'm gonna sorta restart here. Did you run NPM install canvas-cla?
>> Speaker 2: [INAUDIBLE]
>> Mathew DesLauriers: Okay, no worries. And you'll notice that there's this sort of server running. It should be running on your local IP.

[00:03:47]
So you could actually type in localhost and then 9966 in your browser, and you should see a sort of white box. And it's very hard to see on this screen, but on your own laptop, you might notice a bit of a drop shadow. That's basically just the border of the canvas that we're gonna be working with.

[00:04:10]
And so what I'm gonna do is I'm gonna open this folder up in my editor and I'm just gonna make sure that it's working and that we have the development server running properly.
>> Mathew DesLauriers: So generally when I'm doing this kind of creative code stuff I just I have one window which is the browser and the other which is the editor.

[00:04:37]
And you'll see this is the file that got created the sketch touch s file and if you open it up in your editor and you try changing some code like for example changing white to red as soon as you save it should immediately update within the browser as well.

[00:04:54]
And you can just test that by changing it to some other color. This is just like a CSS color string. And if that's all working, then you should be getting different colors every time.