A Guide to Setting Up Your Svelte Development Environment

[00:00 - 00:25] Hey everyone. In this lesson we're going to be setting up your first S.P.E.L.T. application on your computer, setting up the development environment that we're going to be using for all of the charts in this course. So, a quick note on setup. Setting up a project can be very hard, very frustrating, and very difficult. I'm years into this work and I still get headaches on trying to set up the development environment for different tools and technologies and libraries.

[00:26 - 01:00] So, if that happens, please don't let that be the reason that you don't get in to S.P.E.L.T. in data visualization. Please reach out. There should be like a lot of resources online that can help you, but also if not, just DM me on Twitter or reach out by any other means and I'll try to get you set up as best as I can because it would be a shame if that were the reason you didn't get in to S.P.E.L.T. in data visualization. So, how do we set up a S.P.E.L.T. application? On a high level, we're going to be using the command line to interact with our computer's file system through commands rather than clicks.

[01:01 - 02:18] We're going to be using that to clone an existing template that I've already built for you. And then once we clone it, we will navigate into it, install some dependencies and run it from our computer. All of this without ever really double clicking on a file or anything of that sort. We're going to exclusively do this on the command line. So, what do I mean by the command line? Let me go ahead and open up what the command line looks like and you might notice something familiar. This kind of looks like something you might see in a movie whenever you see someone trying to hack. You see this type of monospace font in this interface. And this is actually how we will be interacting with our files in today's, or in this course. Rather than opening up files in our finder, which you might be used to in some contexts, double clicking and then clicking individual files and opening in that way, we're going to be doing all of this through the terminal. And the reason for this is it's just a bit easier, a bit safer. And as you get into future examples like Git and other tools that we'll need to learn, you'll need to use the command line to do so. So, it 's better that we familiarize ourselves now, because it'll just set us up for success in the future.

[02:19 - 03:18] So on Mac, if you're on a Mac, you'll go ahead and open the terminal application like I've done here. And if you're on Windows, you'll use something like PowerShell. I'm not a Windows user, so I can't vouch for exactly what you'll use. But my understanding is you'll install PowerShell and use that. What we want to do from here is navigate to the directory that we want to create our project in. Now, you might be asking, I don't even know where I am. How do I know where I can navigate? And the answer to that is this command called LS. And LS, as it kind of resembles, you can think of as list as list the files that are present relative to where I am currently. So if I LS from the very root of my computer, I can see all of the options that I can in fact CD into or navigate into, which as I kind of just said, will navigate into folders by typing CD and then the name of that folder.

[03:19 - 05:00] So for my case, I will go ahead and CD into my desktop, because that is where I want to create the new folder for this course. So now I live inside of the desktop folder, and I can see what's inside of that by typing LS again, I see all of these files and folders. Now, I want to create a new folder or a new directory using this command MKDIR, which sort of resembles make directory. And I'll go ahead and type make directory, and I'll call this S felt course. Now, I haven't navigated into it yet. So after making the directory, I want to CD into Sfelt course. Now I am in fact in Sfelt course. And if I type LS, you 'll see that it's actually an empty directory. Now it's empty right now, nothing lives in there, which we will solve soon as we get into cloning my existing template. But we can verify that we did in fact create Sfelt course and navigate into it, and it does in fact exist. As we can see in the finder desktop now includes a folder called Sfelt course, which is in fact blank. That is where we are currently in in our terminal. So now that we know how to navigate into a directory, let's create a Sfelt application inside of it. Now this is going to require you to set up node and NPM. And if you don't already have node, you can go ahead and install it using this link on Windows or Mac OS. But once you have node, it will be much easier to kind of get started, get up and running with this template, which is what we'll do here.

[05:01 - 06:15] So once node is installed, you can initialize a Sfelt application by cloning the bare bones template that I've put together for this course, which lives right here. There are a few ways to do this. For example, you could, you know, get clone the actual link. If you 're familiar with that, but assuming you're not, maybe the easiest way to get set up is running NPX, Deget, and then the name of my template, and then the name that you want to apply to your new folder. So NPX is a tool for, it's an NPM package runner, meaning it can run things like Deget, and then Deget is a scaffolding tool that creates copies of Git repositories. So this is the basic syntax, these four commands, and you can go ahead and copy the command we have here to copy my template and paste it into a new folder called my first Sfelt app. So if I run this in my terminal, you'll see a success message, clone to my first Sfelt app. And if I list what's currently present in my current folder, you'll see my first Sfelt app is there. So you might remember that the way that we get there is with the command CD, change directory, CD into my first Sfelt app.

[06:16 - 09:06] As a note, right there, I was able to click tab to auto complete the name of that directory, because it's the only directory or the only folder that actually matched the string up until that point, right? So nothing else would the computer cannot detect anything else that started with ny in the current folder. So whenever I click tab, it knows to auto complete that name, my first Sfelt app. So now we've navigated into it, my first Sfelt app exists. Let's go ahead and list what's present. We have a readme, a package lock, json, a vt config dot js index dot html, package. All of these should be Greek to you, right? There's, there's not much logic that we can discern from this yet, but we'll get into all of these contents soon. For now, we can go ahead and open these up in a code editor so we can actually see what's happening in each file. So in order to edit your Sfelt app, you'll need a code editor. I'm going to be using visual studio code. It has a marketplace of extensions, which are very handy, and it has a great developer experience. If you want to use another code editor, I'll assume you're familiar, but otherwise I would recommend VS code. And if you don't have it installed, go ahead and download it for your Mac or Windows device, and we can proceed from there. So if you're on Mac, there is a kind of handy way to get set up with visual studio code. So you can actually open it from your terminal, which remember is this interface right here. So I'd recommend you do this, and I'll briefly kind of go over how I would do it. So open visual studio code. And so once visual studio code is open, we'll type command shift P to open up the command palette, which looks like this. Then we'll type shell command, which allows us to to click this to install the code command in path. And so I've already done it, so I'm not going to click. But if you haven't yet, click that and install the code command in path. And then you might have to restart your terminal and navigate back into my first felt app. So I'll go ahead and do that to show you how I would do it. So I'll open up terminal. You'll notice that I'm back in my route directory, and I want to CD into desktop. And then I want to CD into spelt course. Now I am in spelt course, and I want to CD into my first spelt app. Now, since you've installed this shell command code period, right, that's what you just installed according to this step, you can actually run code space dot code space period, which means open VS code in the current directory.

[09:07 - 11:44] So remember that I'm in my first felt app, and I can run code space period. And this will open visual studio code with the current directory that I was living in in my terminal. And sure enough, you can see that it does in fact exist. We have all of our files with these handy icons to indicate what types of files they are. And you can see each file, for example, a dot sp elt file that will actually power our output. So we're in visual studio code, we're looking at our project. Probably the last thing we want to do is to install VS code extensions. In particular, there's this really nice one called spelt for VS code, which you can install by clicking on the extensions tab over here. It's the four rectangle grid icon and type in spelt for VS code. I already have it installed, so I'm not going to. But if you didn't, you would click install, then you might have to restart your VS code to see a take effect. But once you have it installed, you should see some syntax highlighting like this, and some auto completion as you type. So overall, it's going to make your developer experience much, much cleaner, much, much easier. So we have our visual studio code open, we have our project within it open, and we can see each felt file as it should be seen thanks to our extension. Now we want to see what the actual output of this would be in our browser. And to do that, we need to open up an integrated terminal. So what does that mean? This is a terminal. Remember, this application is literally called terminal and visual studio code has this cool tool called an integrated terminal, which you can get to by clicking terminal new terminal, or you can run this command, which is control shift tilde. Either one of these will work. So I'll click control shift tilde, or I could click new terminal right here. And now you'll see we are in my first felt app, which is the exact same place that we are in this terminal. They're the same thing. The reason that we do it integrated is that we can see live updates in our terminal. If there's an error , for example, in our code editor, rather than having to tap back and forth and back and forth. So from here, I can't recall if we've NPM installed yet. So let's go ahead and do that, where we're basically installing the dependencies that we need to run this project. Then, and you can go back to read this just so you can make sure we're tracking, we can run NPM run depth, which is how we start our application.

[11:45 - 12:17] What you'll see is some logging, and then it will show this green text and a link if it did in fact succeed. And you can go ahead and command click on this link to open it in a new tab, and you'll see our output is in fact present. Now you don't have to do this. We'll do this in the next lesson, but if you wanted to verify that it was in fact working, you could go ahead and edit something here. Let's make a really cool chart, and you can see update in your output in what's called hot reloading.

[12:18 - 13:08] So this is live updating, it is reloading as we edit, and you can now see your first cell application up and running. So I think this gives the primary steps that we need to, you know, run our application to make edit, et cetera. So that's a pretty comprehensive overview, but briefly, you know, while we are here, let's get into what a Svelte file contains while we're looking at it. And so I'll pull up the output on the right and the code on the left. You're going to see three, at least three parts of a Svelte application. You're going to see a script tag, some markup, in our case it's a main tag, and a style tag. And so what you'll notice is that the top of this file is a script tag, it contains logic and imports that are relevant to our application.

[13:09 - 14:44] We have the import of a component, we'll get into what that is, we have an import of some data, and then we have a command to console.log our data, which if you look in our console, you'll see it is in fact, console. So the script tag contains our logic and the markup, in our case a main tag, contains the content. Here we have content like an H1 and H2, an example component and a footer. And again, if we edit it any of this, it would in fact update in real time. And then finally, we have a style tag. And the purpose of the style tag is to make it so that our content doesn't look like this, right? Without any styling, raw HTML, raw markup is going to look like this, which is pretty ugly, and we don't want that. So a style tag includes a series of CSS rules that style this text and make it look much more beautiful. So we'll get into some specific rules that are relevant to our application later, but for now, just know that this is how we make the project beautiful, is everything within the style tag. So we have a script tag where logic lives, a main tag where markup lives, and a style tag where CSS lives. And now that we know how to initialize, open, run, and edit our app, we're ready to finally build our first chart in module one, a simple scatter plot. So I'll see you there and I'm super excited to get started.