Setting Up a Svelte Local Development Environment

Now that we've covered the high-level design for our application, we can talk development environments set up. So for our app, we will run a local Svelte environment and also a local Express environment. And for both of those, we'll need Node.js. If you don't already have Node, head over to Node.js.org and download the appropriate installer for your operating system. In addition to Node, we'll also need Git. And we don't need Git from a source control perspective, but it's required for just one step, which is the Svelte project initialization. Of course, you can also use it for source control too. And then this project will use a lot of command line operations. And so optionally, it's nice to have a more powerful command line tool. For Macs, Iterm2 is a good option. And for Windows, Commander is a good option. And both of these offer tab-based command line instances. So you can have multiple tabs or multiple command line instances open at once. And this can be helpful when you're trying to run several things at once. For Commander, you may need to edit your path system environment variable. And essentially what this means is just pointing your path to the bin directory for the commands you want to run. For example, the node command and the git command. So here's a look at Iterm2. And in my setup, I can run a node command from any directory. So for example, I can run node-b. And that'll tell me the version of node or any other node command. And likewise, I can also run a git command from any directory as well. So if you're having a little bit of trouble, you may need to look at some tutorials and figure out how to point your path to those executables that you want to run. And then lastly, we're going to need a nice text editor. And VS code is a fantastic open source option that's becoming really popular for JavaScript development. Here's a quick look at VS code. And VS code lets you have multiple files open at once. And it does a lot of really nice code highlighting. There's various plug-ins that help you with formatting. And it also has an integrated terminal and an integrated git instance. And you can browse around the files on the left-hand panel here within your project so you can pretty easily move in between files. So, as we spoke before, the project will be organized into a school lunch overarching directory and then a backend directory and a front-end directory underneath that. The source code for the backend express app and the front-end spelt app will be able to run separately in the local environment. So it will keep them separate from an organization perspective in the file system. So we can go ahead for the last step in this lesson, we can go ahead and create the overarching school lunch directory. So I'm just going to run an MKDRE school lunch and that'll create that directory. Now in the next lesson, we'll initialize the spelt project which will create the front-end directory and create a lot of boilerplate spelt files to get a spelt project up and running. [ Silence ]