Setting Up a Remix Project
Remix is a web application framework built on top of React, that gives you sprinkles of server when you need it - fetching data on page load, mutating values in a db etc. In this lesson, we use the create-remix package to setup our new app. Additionally, we run the project is development mode with npm run dev and update the content on our index route.
Code Snippets
Create a Remix app
npx create-remix <name-of-project>
Resources
Instructor: [0:00] Type npx create-remix to create a new Remix project. I'm going to call mine chatter again. This is going to step us through some configuration questions. We're going to select just the basics and we're eventually going to deploy this to Vercel. I'm going to select that here. [0:15] We're going to use typescript for our project and we want to run npm install. Once that's finished installing, we can change into that directory and then open this project up in VSCode.
[0:26] This has created a basic Remix application for us and under the app folder and routes, we can see index.tsx, which is the route for our home page. Let's open up our terminal here and we can type npm run dev to start a development server, running on localhost:3000.
[0:45] Now, if we navigate to that page in a browser, we see the text "Welcome, Remix," and these three links, which is exactly what we see in our component here. If we were to replace all of this jsx with the text "Hello Aggies," you'll see, as soon as we save our component, the text is updated in the browser.