Repo Setup

[00:00:00]
>> So that's what we're gonna be covering today. And let's talk about the logistics of how this workshop operates. So hopefully, you have a repo setup locally on your machine. You'll notice we have three directories that have different apps in them. So the example directory will reference this in one of the exercises, so don't worry about that one for now.

[00:00:26]
The exercise directory was where you're going to be spending most of your time, and the final directory is where the finished version of the exercises resides. And in the exercise directory each one of these is a full remix app and so the app that we're using is actually the same for all of the these different remix apps.

[00:00:46]
And for each exercise, we actually remove a feature and your job is to add it back in. And so, we're going to explore this and your instructions will be in the README file where we have some background information for you to read and reference. And then, some information on the exercises specifics of what you're supposed to do, what your job is to accomplish in here.

[00:01:11]
And then, we have the files that you're gonna be working in and inside of each of those files, for example, the app, the double underscore app. We didn't actually talk about this in the fundamentals' workshop, but this is the convention in the file system. So I want to have a special layout for all of the components under this directory.

[00:01:32]
So I wanna have a parent layout that has like my form and this nav and everything, but I don't want a segment in the URL for that, okay? I don't want that. I don't want a double underscore app slash anywhere, I just wanted this to be @ slash.

[00:01:48]
And so that's that's what that convention is all about, if we go into invoices, invoice ID. And then, you can scroll down, and you'll find Kody, the Koala, who will give you the instructions on where you're supposed to be making changes to code. For some of these exercises, there's actually not a lot of changes to be made, but most of your time should be spent experimenting in the browser and seeing the difference in what changes happen when you make the changes that you're making.

[00:02:19]
And then, we have this elaboration and feedback at the bottom here. You can submit feedback to me on the exercise specifically. And what's more important is that you do this elaboration piece and whether you elaborate on what you learned, like you just write it in your own words.

[00:02:32]
Whether you elaborate on what you learned in this form or in the note section at the top of each of these READMEs, it doesn't matter to me, or you could do it in your own note-taking app. The important thing is that, for your retention, you need to be able to rewrite or just kind of explain in your own words, what it is that you learned, and that process is what solidifies your learning in your head.

[00:02:55]
The other thing that I'll just mention is that my approach to teaching has changed over the years. I used to just say okay follow along with me, turns out because, I have the curse of knowledge and I do this a lot. I'm really fast, and it was hard for people to keep up.

[00:03:12]
So, then I went to okay, let me do it, and now you do it. And that did not help with retention. I even said I'll do a similar example, and you'll do a different, one still did not help with retention. So, what helps with retention is for me to throw you into the ocean, give you a life jacket and have you struggled for a little bit on this.

[00:03:31]
And the life jacket is this background information and so, and links to docs and things like that. And with that, you hopefully have enough to be able to struggle in an effective way so that when I come back and go through it, you'll have all the questions in your mind answered as I go through it.

[00:03:51]
And if I don't answer all those questions, then we'll have an opportunity to ask and answer questions at the end of every exercise. That is how things work from a high level. Now from a technical level, to get each one of these apps running you're going to use the these two scripts it is the dev scripts and then the diff scripts, so let me demonstrate both of those.

[00:04:15]
So from the root you can say node dev to run the dev script and this will ask you which app you want to start. You can start any of the exercises, any of the finals and the example. And so, if I select the exercise the first exercise, then this will tell me that my app has started on port 4,001.

[00:04:33]
The final always starts on port 5,000. And then each exercise or the port will be the number of the exercise plus the 4,000 or 5,000. So you always know that you're on the right out based on what the port is. And then, we'll log in this workshop, you're going to need to log in every time you go to a different exercise, you'll need to log in.

[00:04:57]
So the username and password you can find in the seed script that's in the Prisma slash seed.ts. That's the user that we seed into the database when we set things up, but the username is kody@remix.run, and the password is kodylovesyou. So because kody does love you, so remix are run, kody loves you, and then login.

[00:05:20]
And this is the app that we're gonna be working with. It's not completely built out. So if you go to some of these, they were working on this together, right? We're in the middle of building this. We're gonna finish it. We're gonna sell it to QuickBooks and make silly amounts of money.

[00:05:36]
Maybe, I don't know, but the invoices customers and deposits pages are mostly finished. And we're like I said, this app is finished, and then each exercise removes a feature that you're responsible for adding back in. So, that is the dev script. You can also be a little faster if you just say the exercise number.

[00:06:00]
You can also say if you want to run the final, then you just prefix it with final and then a number, however you want to do that as quickly as you prefer. And then, if you get totally stuck, and you're working on it. You're like I'm pretty sure I have exactly what he has in the finished version, then you can actually find a diff between the finished version and yours by running node diff.

[00:06:23]
And then the exercise number or just written no diff, and it will allow you to choose which one to compare to. And this will just take a diff of what's in the app directory. So that should be enough to get us going, yeah?
>> Was testing on that list?

[00:06:40]
>> Yes, testing is not in this list. Testing would be an entire workshop by itself. So, but I can address testing with remix really briefly. So testing clearly like I have, the testing course here on frontend masters talks about principles as well as testing with React. And so, testing is clearly something that's important to me in remix, all of the stacks that we talked about in the fundamentals course, those stacks come pre-configured with testing.

[00:07:11]
And they have Vitest setup for your unit testing and Cypress set up for your end-to-end testing. The integration testing piece of like component integration is currently there's not a great story for that because Remix components require providers that we don't expose. And so, there's not a good way to render a component that renders a link for example.

[00:07:36]
And so, currently the solution for that is to mock out the link component. And it's not a great solution, but that's that's what I would recommend, that's the simplest thing. In the very near future, when the remix router is released, we can start working on testing utilities that will provide all of that stuff for you, it'd be a lot easier.

[00:07:55]
But yeah, right now that is the story. I should mention also that loaders and actions are actually pretty easy to test relative to what you might be used to because you're literally just calling a function with a couple arguments and asserting on it, it's output. So I can't think of too many things that are easier to test with from a backhand perspective.

[00:08:15]
Of course, you may need to mock a database and stuff, but that's how you do backend testing. So yeah, the trickiest bit is just the components that use remix components in them. And for now, you'll just mock the those things out. In the future, we'll have better utilities for that.

[00:08:33]
So thanks for asking and yes in the future we will have a course on testing remix apps for sure.
>> If you have an existing Express app, how would you go about adding remix into the application without having to rewrite everything?
>> Yeah, that's a great question. Not necessarily related to what we have here, but I will briefly give you an idea of what I would do.

[00:08:54]
I would say, npx create remix, and when you generate this project say just the basics and choose Express server and use TypeScript or JavaScript, whichever you prefer. I'll just say no here, and we'll cd into to my remix app, just to take a look at this. And you'll see we have a server.js that is using Express that will show you how to integrate remix with Express.

[00:09:22]
It's literally just this. There's some helper stuff here like this purge require cache. So you don't have to restart your server every time you change code on the backend, which is kind of nice, actually. But yes, so if you have an existing Express app, I would just look at this.

[00:09:37]
This is actually there's a template that you could just look at that code on GitHub that generates this project. And then, you can integrate this on a route-by-route basis. So over time, you just move more routes into remix until they're all remix. And that's actually, kind of, similar to the way that I would do a migration from a create react app thing or anything that's using react router.

[00:10:04]
You just over time move things over, and we actually do have a migration guide on the remix docs for migrating from create react app or some, like you're on web pack thing over to remix. And we're gonna have even better answers for that in the future as well.