Sidebar: Build a React app using Vite and GitHub Codespaces

- [Instructor] Quick sidebar, as we work our way through this course together, you'll notice I'm building a React app using Vite in GitHub codespaces. And as you finish out the course, there's a good chance you'll want to set up a similar project yourself later. So let me walk you through the process of setting this up from scratch so you don't have to take my existing project and delete it and start over. The reason I'm using Vite instead of webpack and create React app is because this gives me a far cleaner and faster environment to work in. Vite is a relatively new build tool whereas webpack is over nine years old, and there are huge advances that have taken place over those last nine years that Vite is taking advantage of. To start this process, go to GitHub, and create a new repository. I'll just call mine vite-demo, and I'll set it to public and Add a README file just so there's something in the project. Create repository. And once we're in the repository, I'll go to the Code button, select the Codespaces tab, then click on these three dots to open extended functionality and go to Configure dev container. This step is important because once Vite is active, you're running the dev process. Vite will try to spin up a browser preview in your browser and that requires opening a port and we have to tell the virtual machine codespaces is running in what port that is and what we should do with that port. Inside devcontainer.json, we're telling codespaces how to configure itself. So here after features, I'm going to add in a little bit of code, so I'm saying portsAttributes. Then we list out each of our ports. In this case it's just one, it's 5173. We give it the label, Vite port, and we say onAutoForward, openPreview. So openPreview means that it'll open a preview inside VS code itself in the browser. You can also change that to open browser if you want it to open in a separate browser window. Then at the bottom here we say forwardPorts and here we have an array of ports we want to forward in this case 5173. For reference, 5173 is the port Vite uses by default. I'll Commit changes to commit this to my project. So now it's part of the overall project. When I go back to code, you'll now see we have a devcontainer folder. That's all I need to do in GitHub. From here, I can now start up codespaces by creating a new codespace on Main. This codespace is a virtual machine that runs my project inside Visual Studio Code in my browser. And this codespace you see here is the starting point of the codespace that you'll be working with throughout the rest of this course. While the codespace is building out, we can go to the Vite documentation, found at vitejs.dev/guide, and if you scroll down here, there's installation instructions that are simply npm create vite@latest. So that's the command we'll use. I'll go down here in terminal and paste that in. Now codespaces will go out and find Vite, says do you want to install the following packages? Yes, I do. Then it'll say, is this a project name? Yes it is. And from here we can then install a framework. So you can go with Vanilla. So no framework, you can use Vue, React, Preact, Lit, Svelte, et cetera. I want React and I want JavaScript plus SWC as the buildout that installs all the pieces I need in a new folder called vite-project. Then I'll say cd vite-project to get into the project and npm install to install all the dependencies inside the virtual machine, so that we can work with all the dependencies. And while that's happening, I'll make one more change. I'll go into vite-project and go to package.json. And here at the very top we have scripts and it says dev, vite. So I'm going to add something to that. I'll say dev, vite --host, save that, this tells Vite to specifically use whatever host the environment provides and that's what we want here. So now I can clear this and then say npm run dev and Vite will spin up an environment then automatically open it up in a preview in my browser here. And as you can see, Vite is now working with React in my browser and I can go make changes to the project and those changes will automatically show up here in the simple browser, and I can also click on localhost here, and open up the same thing in a separate browser window. All of this is now happening in my browser without me installing anything on my computer. I have a clean install of React with Vite and I can do whatever I want with it.