Transcript from the "Creating a Svelte App from Scratch" Lesson
[00:00:00]
>> So we've been through the entire tutorial, and now you understand how to build Svelte applications, and what Svelte can do. And on the website, there is an interactive repple that you can use to build applications and components of your own, and you can do quite a lot in here.
[00:00:14] But ultimately at some point, you're gonna wanna take the Svelte experience out of the repple and onto your local machine. And so this next section of the workshop is gonna be about how to do exactly that, and I'm gonna show you how to do this from scratch. Because that way, you'll get the best possible understanding of how Svelte actually fits into your existing development workflow, and then I'll show you an easy way to do just that.
[00:00:39] So I'm gonna go over to my terminal. And I'm gonna create a new project, just bear with me one second. And then inside here, I'm just gonna make a source directory. And I'm gonna have these instructions open on one half of the window while I'm doing this so that you can see what's happening.
[00:01:29] Now for this project, we're gonna be using Rollup to do our module bundling. Rollup is a piece of software that can take multiple JavaScript files and combine them into a single file suitable for serving to users. And this is what we use in the default project template right now.
[00:01:48] We do also have an official web pack loader and there's a bunch of community plugins for using things like Parcels, Snowpack, Vite, and so on. And so it's possible that in future we'll be using something like Snowpack or Vite. Which are essentially beneficiaries of the fact that modules exist natively in browsers now, and we don't necessarily need to be bundling everything all the time.
[00:02:09] But for right now, we're gonna have to bundle our application in order to use it. So we're gonna install Rollup by typing in npm i which is short for install dash D which is short for development. And then the word rollup. So that installed roll up into our project, and then we're gonna create a Rollup config file.
[00:02:45] It just looks like this, and this config file is gonna expect to find a file called source/main.js. And it's gonna generate a file called public/build/bundle.js, that's gonna be the file that gets loaded in the application. So we need to create that source/main.js entry point, I'm just gonna paste this command in here.
[00:03:13] And if you have this website open, I encourage you to follow along. So we've created some source files, we've got a main.js, which imports our hello.js, hello.js just exports a function logs the word hello. And now if we run Rollup, we can see what it does. It's gonna take that input file, follow those inputs, and generate a public/build/bundle.js.
[00:03:39] And you can see that it's literally just taking those two modules and smush them together. So now we just need to add an index.html file to actually load that module, and I'm just gonna copy everything over from this page. And then to serve this page, I'm gonna install a dependency called serve, again, npm i -D serve.
[00:04:09] And once that's done, I can say npx serve public, npx just allows you to use anything that's installed locally in your project, and it is now serving that page on localhost 5000. So go over there. Okay, and if we open the console, then we will see that it is indeed logging the word hello, okay?
[00:04:42] So that's all well and good, like you now understand what Rollup does, but we need to get Svelte in involved. And Rollup itself doesn't understand what a cell component is or does, so we need to teach it, we need to add a cell plugin for Rollup. We also need to add a plugin that will teach Rollup how to find things inside your node modules folder.
[00:05:02] So we're gonna install two things over here, we're gonna install rollup-plugin-serve and rollup/plugin-mode-resolve. Right, and then we need to add those plugins to our roller config, I'm just gonna select this whole lot and just paste it in. And I spent a long time last night trying to figure out how to make a diff highlighted code blog into something that you can copy and paste.
[00:05:56] See if you can reverse and engineer how it works. Okay, so now that we've done that, now that we've added those plugins, we can add a Svelte component. I'm gonna create source/app.svelte and I'm gonna paste in some basic content into that. And then we wanna import that component into our main.js, and instantiate the component inside that, so I'm just gonna replace everything with this.
[00:06:29] And this is the client side Svelte component API, app is just a regular JavaScript class that you can instantiate with the new keyword. And it takes a bunch of options, target is the only option that is required, and the target in this case is going to be the document body.
[00:06:46] And we can also pass a bunch of props which if the app exports any props which this one does, it exports this name prop, we'll get initialized to these values. And the last thing that we need to do is add a link to the new bundle.css that is being generated here from this part of the plugin.
[00:07:13] We add that into our index file, and get rid of that text because that's no longer relevant. And now if you've set everything up correctly, when we run Rollup, it's gonna find that Svelte module, and turn it into JavaScript. It looks like I haven't managed to install, there we go.
[00:07:51] Install the correct thing, run Rollup [LAUGH] and I also need to install Svelte itself because that doesn't come included in the bundle. So npm i -D svelte, This time, third time's the charm, npx rollup -c has created our bundle. And so now when we do npx serve public, it's gonna serve our Svelte project on localhost 5000.
[00:08:22] And you can see that indeed, it is creating our application and rendering it to document.body. All right, so that's basically all that is to it, the official template which you can see at github.com/voltjs/template is a little bit fancier. It has live reloading, it has a built-in development server, and various other things that are quite useful.
[00:08:48] But in essence, that's all that it takes to get a Svelte project up and running, using Rollup