Setting Up a Remix Project

Jon Meyers
InstructorJon Meyers
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

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.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today