Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:56 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Creating a Project

We can get started using SVELTE in a couple of different ways. The first would be to just clone the GitHub repository, and that's perfectly fine if that's the approach that you want to take. However, whenever you clone a repository, you are getting all the baggage of that repository, and I know that sounds kind of weird to hear. However, whenever you clone the repository, you are well, you're cloning the repository and that includes the entire commit history. So for a repository that has a lot of commits, that could take a little bit of extra time. So, what we are gonna do is what is actually recommended on the SVELTE website and it's veldt.dev. And right here we can see that they want us to use npx and then the utility called degit. Now degit is really cool in that it will download whatever repository you specify, and it will just download the latest commit as a tarball. So it's not cloning, but we end up with the same result we have all of the files, there's just none of the commit history or anything like that. Now of course for our project itself, yeah, we want to use Git and that's automatically done for us but that's what degit does. It's a scaffolding utility that gets us up and running a lot quicker than just cloning a repository. Then of course, we specify our project's name. So that's what we're going to do. Now of course, in order to use in npx, you need Nodejs. And well, if you don't have Node JS by now, you definitely need it. So just go to nodejs.org, download the LTS version, install it. Take the defaults and you're good to go. All right, so we want to run npx degit, and then sveltejs/template, and then whatever project name that we want. So let's call this first-svelte. And as I mentioned, this doesn't take as long as cloning a repository, in fact this is just gonna take a few seconds. We can see that that took eight seconds which isn't bad. So we need to cd into that folder and then run npm install. And this doesn't take very long either. And after this, we will fire up our code editor and we will also run the dev script. Now that's going to give us a development environment. So we will have a web server that's going to serve all of our files. Whenever we make any changes to the files, then it will automatically refresh the page in the browser, which is kind of cool there. So once this is done, which right there it is, we'll just fire up code. I'm using Visual Studio code, which I personally think is the best editor for JavaScript. You might think differently but you would be wrong. And then we will just run npm run dev, and that will get our project up and running. Now this is going to, by default, give us our site, a local host, Port 5000. And there it is, Hello world. There's not really a whole lot here, but that's fine because we don't need a whole lot to get started. That's one of the beautiful things about the template here. Unlike Vue-CLI or React where we have a lot of extra boilerplate stuff, this is just nice and clean. We have a source folder that has two files, the main file main.js, and then our component app.svelte. And all of our components are going to have that svelte extension. Now I do want to point out this rollup.config.js. This is kind of you're the brains of the application. This is where we specify the entry point, which, as you can see is main.js. So if we wanted to change that, then we could do that here, then there's the output. And we can see that, that is inside of the public folder in a file called bundle.js. The same is true for CSS all of the CSS is going to be bundled in a file called bundle.css. So if we wanted to change any of those settings, then we could do that but we aren't, we're going to leave all that alone. And so let's look at the main.js files. So first of all we are importing our component which we will look at here in a moment, then we are bootstrapping the application. We are creating a new app object, and there are several options that are being passed. The first is the target. That is where our application is going to live inside of the browser. So if we look at the elements as rendered, we have the body and then we have our application there. And if we want to look at the source code, we can see that there's nothing in the body except the bundle.js file. So we can see that the application is successfully being mounted inside of the body of the document, okay? So then we have this prop so we can see that there's a prop called name and it has a value called world. So if we once again look at the rendered output, we can see that the text world is right there, so we can conclude that this is the value of the prop. So if we change this to svelte, and then go back to the browser, we can see that that change. So, yep, there we go. So now let's look at our component, and this is where things are going to of course start to be different from react and view and similar frameworks. Now we have a script, that's of course where we put our JavaScript we have our style, which is of course where we put our CSS. But notice that we don't have a template, in view, we would have a template and we don't have that here. That's because anything that is not inside of the script element or the style is part of the template. And so we are not bound to the rules of JSX or anything like that, so we have a single element here with an h1 that says Hello name. If we wanted to have a paragraph underneath it and say, this is nice, that we don't have to have a containing element for all of those things, we can see Hello. We have our h1 element, then we have our p element. So things are going to be a little bit different, of course they are, this is a different framework. And so in the next lesson, we are going to create a component that we are going to then nest inside of our app component.

Back to the top