How to Initialize a Boilerplate Svelte Project

[00:00 - 00:12] In this lesson, we're going to initialize our Svelte front-end project. If you've ever used the Tools Create React app or View CLI, then the next step will be familiar to you.

[00:13 - 00:29] Svelte has a similar initialization tool that makes it really easy to initialize a Svelte project. So all we have to do is run this npx command.

[00:30 - 00:37] So I'm going to head over to the command line here. And we do need git prior to running this command.

[00:38 - 00:55] So you should be able to type in git and run a git command prior to running this command. So if you type in git and that doesn't work, then you'll need to check your path and make sure that you have git installed and configured correctly.

[00:56 - 01:06] So once we have git, we can go ahead and run the npx command. And so this command will initialize a Svelte project using a template.

[01:07 - 01:22] And the folder name that we're going to initialize the project into is just going to be front-end. So we're in our school lunch directory and we're going to initialize a Svelte project into a new folder called front-end.

[01:23 - 01:35] So once we run that command, if we take a look, now we've got a front-end directory. So we can go to that front-end directory and then take a quick look.

[01:36 - 01:48] And you can see that the initialization created some boilerplate files, including a package.json file. And then we'll take a look in a second and look at some of the other files.

[01:49 - 02:01] But the package.json file is going to describe the npm dependencies needed for the project. And so what we can go ahead and do now is run npm install.

[02:02 - 02:17] So within the front-end directory, next we need to run npm install. And so when we do that, it'll fetch down all the dependencies needed for the S velte project.

[02:18 - 02:32] And so now if we run ls to list the files, you can see that we have a node modules directory. And so this is where all the code for all of the libraries and dependencies that we're using is going to sit.

[02:33 - 02:46] So here's the really cool part. Now that we have initialized the project and installed the dependencies, we just need to run npm run dev.

[02:47 - 02:58] And that'll fire up a local Svelte environment on port 5000. So all we have to do is head over to the browser and open up localhost 5000.

[02:59 - 03:06] And you can see your Svelte project running. So this is the local Svelte environment running local Svelte code.

[03:07 - 03:27] Let's go ahead and open up VS code and take a look at the files that were created. So within VS code, choose open folder and then locate your school lunch project directory and go ahead and hit open.

[03:28 - 03:34] And so this will open the whole entire project in VS code. And then over on the left hand side, you can look at the files.

[03:35 - 03:41] So take a quick look at package.json. And this shows you the scripts that you can run.

[03:42 - 03:49] So when we ran npm run dev, it's actually running this roll up command. And that's what starts up the local dev environment.

[03:50 - 04:01] And then you can see the dev dependencies and the production dependencies. So there's not too many dependencies that are needed, but these are the ones that were installed when we ran the npm install command.

[04:02 - 04:14] And then taking a look under the source directory, there's a main js file and an app.Svelte file. And so these are just some basic files for the app.

[04:15 - 04:24] The main js file is right here and just a real simple introduction to Svelte. This is what harnesses the Svelte app.

[04:25 - 04:37] And it passes down a prop called name down to the app.Svelte file. And then the app.Svelte file actually refers to that name variable right here.

[04:38 - 04:49] And then that's what's displayed in the web page. So another really, really cool feature about these new JavaScript frameworks is the hot loading local dev environment.

[04:50 - 05:08] So if you remember back in the browser, it says hello world. But if we change this code to hello me and hit save, the hot loading local dev environment is going to automatically replace the code and refresh the page.

[05:09 - 05:19] So I don't even have to hit page refresh for my code to be reflected. That's a really cool feature and it helps developer productivity a lot.

[05:20 - 05:27] So while we're here, we can go ahead and clean up a little bit of the boiler plate code that was created. We don't need all of it.

[05:28 - 05:39] So we're going to remove the props object from main js. So right here, just get rid of this.

[05:40 - 05:53] And we're going to remove the styles from app.Svelte. So in the app.Svelte file, just remove this style block.

[05:54 - 06:06] And then under front end public, we'll delete the global.css file. So front end public, this will have CSS files and image files and so forth.

[06:07 - 06:21] We're going to get rid of this one. And then in index.html, we're going to remove the reference to that global.css file that we just deleted.

[06:22 - 06:30] So this index.html is the base HTML file for the app. And so Svelte actually gets mounted to this HTML file.

[06:31 - 06:45] And then the JavaScript handles rendering of all the remaining HTML onto the web page. So get rid of this global.css link here.

[06:46 - 06:51] Very cool. So we initialize our Svelte project and cleaned up a little bit of the boiler plate code.

[06:52 - 07:01] And that's it for this lesson. In the next lesson, we'll install and configure some tools to help keep our code formatted and clean in our local dev environment.