Let's talk about getting our repository cloned and setup. Navigate to the repo for the module you are working on, I'm doing react-fundamentals in this example, and clone that into a directory (whichever you prefer!). I'm going to call mine Epic React.
To start the setup, copy the code in the Setup of the README in the repository, cd into the Epic React directory, and run that copied code in your terminal.
Here's an example of what that code will look like:
git clone https://github.com/kentcdodds/<module-name>.gitcd <module-name>npm run setup --silent
It'll start off doing some basic System Validation to make sure that you are running the correct versions of tools that are going to be used in this Workshop.
Next it will be installing all of the Dependencies that are necessary for running the examples application. Once that is done, it'll run tests to make sure that all of those Dependencies were installed and running correctly.
Lastly, it'll prompt you for your email. You don't have to put in your email if you don't want to. You can either wait for the timeout or quit out. This is the last thing so you won't be missing anything else.
After all of this, you're ready to start learning!
Transcript
Kent C. Dodds: 0:00 Now we're ready to get things set up. We'll come down here to the setup section. We'll grab this. I want to put all of my projects in the same place. I'm going to put it into a directory called epic-react inside of my code directory. I'm going to make a directory in home/code/epic-react, and then I'm going to cd into that directory code/epic-react.
0:23 Then I will paste this script which is going to first clone the react-fundamentals-workshop. It will cd into that directory that it just created. Then it starts the workshop setup script. Let me explain what's going on while that all gets set up.
0:38 The first thing that it's going to do is do some basic system validation. All this is doing is ensuring that the correct tools are installed on your computer, all the prereqs that we had before so you had Node.js in the right version, Git in the right version, and npm in the right version. It just makes sure that you have all of those dependencies installed because if you don't, then setting up the rest of the workshop probably won't work super well.
1:02 Assuming that that passes, the next thing that will happen is it installs dependencies. This is going to take some time, based on your Internet speed and your computer speed. You might get up and walk away for a little bit. It looks like it doesn't take too long, but that's 2,250 packages. That's a fair number of packages.
1:27 Once the dependencies are installed, we need to make sure that they are installed properly. We're going to run the test, and the build, and linting, just to make sure that everything is ready to go.
1:38 Assuming that the project validation succeeds, then you can assume that your computer is ready to rock and roll with this workshop. If something fails at this point, then something probably is a mess, and you'll need to dig into the error message that you see, try to get that fixed, and then try this all over again.
1:57 If something ever just doesn't work for you and you worked on fixing everything, probably the easiest thing to do at that point is delete the repository completely from your machine and start it all over again, rather than trying to fix it after the fact.
2:13 Once the project validation is complete, it's going to ask you to fill in your email. I'll explain a little bit more what this is for later, but I promise you I'm not sending it to anybody nefarious or selling it or whatever.
2:25 I'll just enter my email address here for hello@kentcdodds.com. This is going to do a git commit here to make your Jest Watch Mode work nicely. With that done, then our workshop is totally set up, it's ready to go.
2:42 There is a timeout on this email address fill in, because I don't want to require it. You don't have to do this, and you could even cancel the script at this point, if you wanted to. It's the last thing that we do.
2:53 If it does timeout, and you're like, "Oh, wait. No, I did want to fill in that script, or that email," you can just copy and paste to this command and run that again and it will allow you to fill in your email if you want to.
3:07 Now that we have everything all set up, and it's all working just perfectly, we can go ahead and open up our editor. I use VS Code. We can say VS Code right here and that will pop up here, or I've got this special alias code, and it will pop up in this directory. You'll choose whatever editor you want to. It doesn't really make too much of a difference.
3:31 You'll see, I have a VS Code configuration folder right here. There are some recommended extensions and that should pop up and say, "Hey, do you want to install these extensions?" These are just some extensions that I find useful and helpful in the process of working through this stuff.
3:51 Then there's this settings.kcd.json. These are my settings, my editor settings that I'm sharing with you. If you want to use these, then you can copy and paste those into your settings. It's totally up to you. I don't want to enforce that on you.
4:04 That is pretty much it. That's the whole process. You just go to the repo, copy the instructions under the setup, those three lines, you navigate in your terminal to the directory where you want to put your Epic React workshop repositories. You paste that in and hopefully everything works fine.
4:22 If it doesn't, then hopefully the error message is instructive enough to help you figure it out and you can try again. If that still doesn't work, then you can open an issue on the repo, and we can help you get things set up and fix it up however you need to. Then once everything is set up and you're good to go, you can pull up your editor and you're ready to rock.