Getting Started with Remix

[00:00:00]
>> All right so, excited to actually get working on code and stuff and not talking so much but hopefully you get an idea of what role Remix plays in the world of building an application. And yeah, the TLDR is a very large role. Okay, great. So, this is the Remix fundamentals workshop.

[00:00:22]
Let's talk about this a little bit. I'm using VSCode. I'm using night owl as my theme, and my font is dank mono. So, questions that people always seem to ask. So there you go. We have a bunch of exercises in our exercise directory, and then the final version of those exercises in the final directory you might notice there are more finals than there are exercises.

[00:00:46]
That's because, we have a couple of steps in some of the exercises. And so, I have you do, like do this chunk and then this chunk. So, there are a couple of neat tools that will help you go through each one of these exercises. But first I wanna show you where the instructions are.

[00:01:03]
So, if you open up the first exercise, you'll see this is like what a Remix application looks like. This is very similar to what you would come with if you ran the indie stack setup. In fact, let me show you how to do that really quick. Even though we're not gonna use this.

[00:01:20]
So, if you run npx create Remix, Then this is going to install the create Remix CLI temporarily to your computer. And as soon as that finishes after the install process, here we go. As soon as that's finished, then you can just answer the interactive question. So where would you like to create it?

[00:01:44]
My Remix app, that's fine. And then it'll give you the options. If you choose pre configured stack ready for production, then that will give you the options between these three stacks. These are the official stacks that are maintained by Remix. And if you want to learn more, then you go to this URL.

[00:02:01]
And I chose the indie stack when setting up this workshop. And I chose TypeScript because I can't even imagine not using TypeScript. And then you run the installation, it will go through the install process and some more setup stuff. If you skip the installation then it will tell you what to do to finish the setup.

[00:02:22]
And then it has like a user authentication implemented already and data models SQLite database, all that stuff already ready for you. And just some instructions in the readme on how to get it deployed. So that is what we're going to be using for our workshop today. So, if you wanted to set up something kind of like this, then you could just run that.

[00:02:45]
So, in each one of these exercise directories, we have this readme.md file, and that is where you're going to start every exercise. You'll come into here, you'll read through or maybe skim some of the background. I've got links to different things in here that could be useful to you as well.

[00:03:03]
And then we have instructions on the exercise, what you're actually supposed to do, in addition to what files you're gonna be working in and then at the very bottom it has this elaboration and feedback. So, an important part of remembering what you've learned is taking notes and making note of what you've learned.

[00:03:21]
So, if you wanna provide me with some feedback on the workshop that you can do that with this link at the bottom of each one of these. But the most important thing is that you're taking notes and writing down what you've learned, and I have a section for that at the very top called notes.

[00:03:36]
So, you can just put in your notes whatever you learned and that's valuable for your learning. So that is where you find the instructions is the readme of each one of these exercises. Now, like I said earlier there are a couple of tools to help make this a little bit easier for you, and so if you open up your terminal and use node to run these two scripts.

[00:04:02]
We've got the dev script, so we say no to dev, and if you just execute that then it will ask you which one of the apps you wanna start and you could choose which one you want. So, we can hit routing and it will start that on a particular port.

[00:04:15]
So all the exercises run on port 4000, and then the number of exercise you're on. So you can run all of the exercises at once if you wanted to. I don't recommend it because on localhost can kind of get funny with like cookies. And it's all the same domain.

[00:04:30]
It's just different ports. But you can run them all at the same time. And then if we run node dev and switch to final, then we'll see that we'll run on port 5,001. So that's the 5,000 space exercise or extra credits run on 5,000 plus 50, plus the exercise number.

[00:04:49]
And then if you want to skip the selection thing, then you can actually just provide the exercise number and it will just run that exercise number. So, node run dev or node dev 1 will run exercise one. And then if you run node dev final/01, then that will run the final.

[00:05:15]
Okay, cool. So, then, throughout the workshop you're gonna be making changes to code and you might think that you're like I totally got this, why is it not working the same way? They're like what is the difference, what's the diff? Well, we have a node diff that will give you the difference between what's in the app directory in the final and what's in the app directory of your exercise.

[00:05:37]
And so, if we run node diff 1, then this will give you the diff between the final and your exercise. Don't like no cheating. So, I recommend you only do that if you're like totally stuck or whatever. I thought I had it exactly the same but I don't.

[00:05:52]
And then of course you can run node diff by itself and it will let you do a diff between any exercise, any folder, whatever. So, those are the tools that will hopefully help you as you're working through all this, of course you can ask me questions and all of that stuff.

[00:06:07]
I will be happy to answer questions and stuff as we go. But I think it's important for you to know the way that I do this. I used to do workshops where I would be like, okay, watch me do this and I gonna just tune out this thing really quick and you're gonna basically, copy what I did, okay.

[00:06:25]
Or I actually, early, I would just, okay, you're gonna follow me. And I found out that because I already know all of this stuff, I move pretty fast, and too fast for people to catch up. So, then I said, don't follow me, I'm just gonna do it and now you're gonna do it.

[00:06:39]
And I realized that that's not a great way for people to remember, because they're literally just regurgitating what I'm saying. So, what I do now, is I say here's a problem, deal with it, and then I just let you go, and I give you the resources I'm not throwing you out in the ocean without a life jacket, I give you a life jacket.

[00:06:56]
[LAUGH] But I liked you work on it and struggle with it because that is how you sort of find in your mind, how this stuff works. And so, then we come back together and I work through it and you can an ask me questions as we go. So, that's how this operates.

[00:07:11]
We just do this for every one of the exercises.