This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Using the Fallback Mock API" Lesson
[00:00:00]
>> Brian Holt: So you can actually do this entire workshop totally offline, which is useful to you as well. Whether that's maybe sometimes our IT guy might have an issue or you're just not in a place where have internet access. In that case, we've actually made it so the API client works 100% offline.
[00:00:16] So I'm going to show you how to make that work really quickly. The first thing that you're gonna wanna run is this command right here, npm install-D cross-env. This is to make sure that environmental variables were consistently across Linux, and Mac, and Window, so go ahead and do that.
[00:00:36] Go to your command line. Go to your projects, which we called ours adopt me, and do npm install-D cross-env.
>> Brian Holt: Okay, once you have that tool installed, then I want you to put this inside of your package.json. "dev:mock": cross-env PET_MOCK=mock. This is the signal for the API to go ahead and use the mock data.
[00:01:14] And then do npm run dev. And this will just do the same command but it'll run it in a different environment. And that's all that's going to do for you. So I'm just going to copy and paste this
>> Brian Holt: Into my package.json. So I actually have it already here but I'll just show you this is where it is.
[00:01:38] And I'll just put that in there.
>> Brian Holt: Now, if I say npm run dev:mock, everything will work exactly the same.
>> Brian Holt: Except all the data will be mocked, which means it will never hit the API. So if I go here to this, refresh the page, and there you can see I have nonsensical data, right?
[00:02:12] Now, this is just returning to you random data. The good news is that it is deterministic in the sense that if I go to, notice that this second one here is called Jewelery. And if I go to Cat, it will give me a different set of breeds. But if I go back to dog,
[00:02:34]
>> Brian Holt: It gives me the same set of data as well, so it's dependably the same list of random things. So if you had the same problem that I did, which is that it wasn't building in a mock mode, just do remove, or rather, what you want to do is you just want to delete the cache and dist directories because sometimes parse gets in a strange state.
[00:02:58] So if you just highlight those two and say delete, and then rerun dev: mock, everything should build correctly.