Creating a Leptos project

- [Instructor] In this video, we're going to hit the ground running with Leptos. At the end, you'll have created a simple Leptos project that you can run and navigate to in your browser. There are two things we'll need to add to our Rust build environment to get started. The first is a tool called Cargo-Leptos, which will help us with building our project. Because Leptos is a full stack framework, there are some nuances around building and integrating the front end and backend that Cargo-Leptos will handle for us. So I'm just going to do cargo install cargo-leptos. Okay, now I have Cargo-Leptos installed. The next thing we'll need to install is a new target, WASM32-unknown-unknown. WASM32 refers to web assembly. As we mentioned in the previous video, to run in the user's browser, our front end Rust code must be compiled to web assembly. If you're wondering what unknown-unknown means, typically for Rust build targets an operating system and a CPU architecture are specified. But since wasm is meant to be operating system and CPU agnostic, we have the string unknown in their places. So now we're going to do rustup target add wasm32-unknown-unknown. Okay, now we should be ready to create our project. Typically, when creating a Rust project, you do cargo new and then the project name. But there's a convenient Leptos starter template we can use that'll get us going quite a bit faster. For Leptos projects, there's several dependencies that need to be added, as well as some extra configuration in cargo.toml, all of which the template has already done for you. So in the directory that we want to create our project, we'll do cargo leptos new --git leptos-rs/start. It's going to ask us for a project name, and we'll call this Moonbound. Now our project's created. The project that we've just created from the template actually has a scaffolding of a basic leptos web application already in place. So right after creating the project, we should be able to build and run it and then navigate to it in our web browser. The go-to command for that, at least when you're developing and testing locally, is Cargo Leptos Watch. Cargo Leptos Watch does a few things. It compiles the front end code to web assembly, compiles and runs the backend code, and then runs the backend binary, which is a web server that can serve up the front end code to your web browser. Before we do that though, there is one thing we're going to change in the template. At the time where we're recording this course, it uses the Rust nightly tool chain, but we actually want Rust Stable. So we're going to specify Stable in rust-toolchain.toml. Looking at our dependencies, there's a lot going on here, so don't worry too much about what all these are right now, but there are some Nightly features associated with a few of the dependencies. So we're going to remove those now. Now we'll go ahead and make sure we're in our project directory, and we'll run Cargo Leptos Watch. Okay, so now that it's running, we should be able to see the web app in our browser. And there it is. So now that we have our project running via Cargo Leptos Watch, we get hot reloading, which means we can make changes to either the front end or backend code and Cargo Leptos Watch will automatically recompile the change component and tell our browser to reload. So we'll see the new changes right away. I'm going to change some of the text in the front end component, and we'll see how that's pretty much immediately reflected in the browser. So I'll find the title that I saw in the browser, "Welcome to Leptos!" Change it to something else. Save the file, and we can see in the browser it's already changed to reflect the new text. Congratulations. At this point, you're already up and running with a simple Leptos application. Now we can dive into the code itself.