Creating a Vite Project

[00:00:00]
>> So how do we do that? Well, luckily, there is a handy-dandy bootstrapper project out there by the Vite team called create-vite. Which is analogous to people might have heard of other create projects, like create-react-app or create-next-app or so on and so forth. And these are becoming increasingly popular, because you can use them at the command line with npm create, and then the name of the thing that has a creator that you want to start a new project from.

[00:00:36]
In this case, Vite. And, again, we can do this at syntax to like specify a version. So if we run npm create vite@latest in a parent directory where we want to have our new project, we will get a ready-to-go working Vite app running out of the box. What this is doing under the hood will be revealed to us in the command line when we try it.

[00:01:05]
Okay, so what I'm gonna do is go up into a parent directory, and I'm going to run, let me know if this is too small. I'm gonna run npm create vite. And, again, I'm outside of the, where am I right now? vite@latest. And this is a, you might see an extra line here where it's like I'm gonna install this package called create-vite.

[00:01:32]
Are you cool with that? And what it's doing is installing that globally so that you can use it wherever to start a new project. So this is one of those cases where like a package is globally useful. Because this is similar to npm init or something, something that we might use all over the place.

[00:01:49]
And then what it's doing is essentially that package has a whole bunch of templates that it is helping us pull from to get some starter code. So we're going to walk through the steps. Okay, project name. I'm going to call this awesome-vite-starter. You can call it something more fun.

[00:02:14]
And then we get a whole bunch of [LAUGH] colorful choices of different frameworks, Vue and React and Preact and Svelte and Solid. We're going to choose Vanilla, Vanilla JavaScript, just JavaScript. And the other thing that's becoming increasingly [LAUGH] popular all over [LAUGH] JavaScript land, it seems, is TypeScript.

[00:02:34]
So a lot of these tools also have support for TypeScript. Right now, we're not doing that. So we're gonna choose JavaScript. And now it's saying I'm scaffolding this project in a directory named for whatever you told me the project should be named, and I'm done. And now, here's what you should do.

[00:02:52]
Move into that new directory, which we're going to do. Run npm install, no further arguments, which is going to. Well, first of all, let's just see what's in here in this directory right out of the box, we got a package json. That means that if I run npm install in here, it's going to look at that package.json and do whatever it said to do.

[00:03:18]
So we're NPM installing, it added 10 packages. Interestingly, fewer than cowsay [LAUGH] and is auditing them and everything, same as before. And then, the instructions before said, now we can do something called npm run dev. So we're just gonna implicitly trust that this is fine, and npm run dev.

[00:03:42]
Okay, now, you're just going to probably not say all of this. All of these ports are in use because you keep doing this so many times, Anjana. But it's going to essentially, what it's done, npm run dev. That's got to be a script, so we can go look at that in a second.

[00:03:56]
But right now, that script is really just running Vite, the program Vite. Which is its own module. And what Vite is doing is running a development server, that's this localhost thing, that is essentially serving my new amazing Vite project up for me locally, just on my machine. Now if I go to this link, and then I'll zoom in a little bit, I have a pretty looking page, but all right, does it actually do anything?

[00:04:24]
Let's try clicking this button. And this is sort of MVP, minimum viable app [LAUGH] for a Vite project, but it is a functional client-side JavaScript program. So what we've got is a very great program that has a button that keeps a counter. And it is running client-side, so like if I refresh, it's not saved in a database or anything.

[00:04:49]
But we're gonna look at a second at why there's actually like a whole bunch of goodies here. Which then now we can use to start making our lives easier and not having to download Anjana's .html files and refresh them in our browser every time we want to. We're going to poke around in Vite a little bit.

[00:05:09]
Why don't we do what every inspired dev does and go poke around at stuff we don't understand. So let us go into now. All right, I'm going to Ctrl+C to kill this dev server. I'm going to open a new code window in my awesome-vite-starter project, which again, I'm gonna make this a little smaller so that it all fits [LAUGH] on screen.

[00:05:39]
Okay, what have we got here? Let's find out. Well, we know we have a package.json. That's the starting point of NPM. So let's look at that. Let's see what's going on. Okay, stuff we recognize. Type: module, cool, private true, interesting, interesting. You can have private npm modules. You can have npm packages, you can have public packages, depending on who you want to be able to access it.

[00:06:05]
We've got a type module, so we know we can use that import statement, awesome. And we have some scripts out of the box. We already got familiar with dev, which we did npm run dev. And that runs the local development server, which essentially is only useful to me as a developer, as I am working on this code base.

[00:06:29]
But we also have the command build, which is just a shortcut to vite build, which is going to build our site or app in this case, for production. So this is going to do some different things than in the development environment. And so now, we're getting into the world of, our lives as JavaScript developers often happen in a world that does not look exactly the same as the world where our end users are gonna ultimately see our code.

[00:07:01]
For example, we wanna be able to do things like edit a file and instantly see the changes. And we wanna be able to do things like mess around with some of the settings without it kind of breaking everything or changing all of our file names. [LAUGH] It's not that not breaking anything.

[00:07:20]
But we, in order to do that, might lose some of the optimizations and some of the, so it might be a trade-off, rather, between some of the optimizations and some of the polish and some of the fanciness that we might want to do. Some of the processing that we might wanna do on our code before we ship it out to the world.

[00:07:41]
Thinking of the old days when you used to get like a CD or a floppy disk even in the mail, because some developer was like, all right, this code is good enough. I'm putting it on this physical media and I am physically sending it to you. Now we don't do it physically, but we do have to send our website to the internet for people to look at.

[00:08:00]
So that is what the build command does. It does some different things than when we are running this site locally. There is also a preview command, which essentially runs a local server that shows you the built version of your site rather than the diversion. So we can we can poke around with it this and see what that looks like.

[00:08:22]
But let us continue exploring what's happening here. We have a new section in our package.json, devDependencies. And we don't have that dependencies that we had before when we installed cowsay. And this brings up a great point that in npm, in Node packages, there are some dependencies that we only need as developers for this project.

[00:08:53]
Tooling, test suites, whatever other conveniences we might need, and things that help us deal with our types and whatnot. But then there are dependencies, and so those are things we need at the time that we're writing the software. But then there are dependencies that we need at the time we are running the software to actually do the thing that the software does.

[00:09:17]
And those are the regular dependencies. So dev dependencies will not be installed when somebody just installs our project. Sorry, when somebody just uses our project. They will only be installed for us if we are in that project and it's not some dependency up the tree of our node modules.

[00:09:40]
So this helps keep that tree a little bit smaller, even though it's still massive.