Creating a Svelte Project

[00:00:00]
>> So we've gone through the tutorial, we know everything there is to know about Svelte. Now it's time to use that knowledge to actually build something. And so what we're gonna build is a little game. We're gonna build a game called ematchi. It is a matching game of the kind that you've probably played before.

[00:00:14]
You get a grid like this and you reveal two cards at a time, and then you have to try and remember where the pairs are. I got that right, are up against the clock. You can see the counter timing down on the right hand side there. And we're using a bunch of different Svelte features here.

[00:00:35]
We're using component composition, we're using slots. We're using transitions, we're using animations, we're using life cycle functions, loads of stuff. So hopefully this is gonna be a pretty good comprehensive summation of everything that we've learned elsewhere in this session. We're gonna begin by creating a project using a package called createsvelte.

[00:01:02]
And the way that we use it on the command line is we type, npm create svelte@latest. I'm just gonna hit Enter there. And that's gonna get the createsvelte package, and it's going to ask us where we want to create our new SvelteKit project. I'm gonna create a directory called ematchi, the name of the project.

[00:01:32]
And we have a few options for what kind of project we're going to create. We're gonna use a skeleton project. I'm gonna use TypeScript for this. If you're not familiar with TypeScript, it's all gonna be fairly easy to follow, so don't worry about this. It's just gonna make things a little bit easier.

[00:01:50]
And I'm gonna add prettier to keep our code nicely formatted. Okay, so it's scaffolded our project. I'm gonna open it in VS Code. And then I'm gonna install my dependencies with pnpm install. Now you don't have to use VS Code, of course, although it is the editor that I would generally recommend for doing this stuff, mostly because we have a really good editor extension for working with Svelte inside VS Code.

[00:02:30]
If you go to the extensions tab and search for Svelte, You will see Svelte for VS Code up here. And I strongly recommend that you install this extension. It's gonna make your life a lot easier when you're building things in Svelte. So this is a SvelteKit app that we've just created, and we haven't covered SvelteKit yet, and we're actually not going to.

[00:02:53]
This is the way to build Svelte apps. But we're not gonna be learning any of the SvelteKit features, we're just gonna be using plain old Svelte in this demo. Most of our time is gonna be spent in this page.svelte file. Right now we have some placeholder content that says, welcome to SvelteKit.

[00:03:18]
And if I fire up the development server with pnpm dev, or npm run dev, if you're not a pnpm user, Then that's opening a development server on port 5,173, because we're using Vite, and that is the port that Vite uses. So I'm gonna move this window over to the left handside so that we can have our browser open on the right handside.

[00:03:46]
I'm gonna open that to local 5,173, and you can see that we have our page being rendered in the browser. If I make some changes here and save them, you'll see that the page updates.