1 00:00:00,870 --> 00:00:05,320 In this section we're going to start up our new project and start to play around with the code inside 2 00:00:05,320 --> 00:00:07,680 of it in order to start this project up. 3 00:00:07,690 --> 00:00:13,070 I'm going to change into my GSX folder and then I'm going to run the command NPM start now. 4 00:00:13,110 --> 00:00:18,880 Before I run this command I want you to know that it's extremely common to see error messages when you 5 00:00:18,880 --> 00:00:22,760 run this command or when you try to visit your application in the browser. 6 00:00:22,780 --> 00:00:28,360 And so in this video if anything goes wrong please watch the whole video because at the end of the video 7 00:00:28,390 --> 00:00:32,060 I'm going to walk you through two very common problems in how to solve them. 8 00:00:32,320 --> 00:00:32,520 OK. 9 00:00:32,530 --> 00:00:34,010 So let's run this thing. 10 00:00:34,120 --> 00:00:38,380 Now when I run it you're going to see a little bit of output scroll and then you're going to be automatically 11 00:00:38,380 --> 00:00:44,080 kicked over to your browser where a new tab is going to open and visit local 3000 and then you'll see 12 00:00:44,080 --> 00:00:50,210 the defaults re-act application appear on the screen and it will probably look something like this. 13 00:00:50,290 --> 00:00:55,280 Now as a quick aside here I want to tell you something that you probably are going to want to know. 14 00:00:55,300 --> 00:01:00,920 We now have our re-act application being ran inside of our terminal as long as it's running in the terminal. 15 00:01:00,940 --> 00:01:06,350 We can then visit localhost 3000 knows that is the address we are at. 16 00:01:06,520 --> 00:01:09,510 That is where our application is available at. 17 00:01:09,550 --> 00:01:14,770 If you ever need to stop the re-act application running in your terminal you can open up your terminal 18 00:01:14,950 --> 00:01:19,910 find the tab inside of your terminal that's running the rack process and then press control see. 19 00:01:20,080 --> 00:01:23,590 Let's try that out right now so I can go back over to my terminal. 20 00:01:23,590 --> 00:01:28,100 I'll see where my re-act application is running and then I'll hit control-C to stop it. 21 00:01:28,190 --> 00:01:33,540 And I should get kicked back over to my command prompt like so once I stop my application. 22 00:01:33,540 --> 00:01:38,910 If I ever need to start it up in the future again I'll run NPM start in my project directory. 23 00:01:38,940 --> 00:01:40,840 I can't just run NPM start anywhere. 24 00:01:40,920 --> 00:01:46,440 I have to make sure I'm inside of my project directory and still go back to my terminal inside my project 25 00:01:46,440 --> 00:01:46,970 directory. 26 00:01:47,010 --> 00:01:53,670 Run NPM starts and once again my app will start up and I'll get directed to localhost 3000. 27 00:01:54,030 --> 00:01:55,420 OK so that looks pretty good. 28 00:01:55,770 --> 00:02:00,920 Now really quickly like I mentioned there might be two possible errors that you're going to run into. 29 00:02:01,750 --> 00:02:04,370 So first off you might see a message that says something like. 30 00:02:04,450 --> 00:02:08,770 Port is in use when you try to run NPM starts. 31 00:02:08,980 --> 00:02:13,090 If you want to see what that looks like you could open up a second tab inside of your terminal make 32 00:02:13,090 --> 00:02:16,830 sure you're still inside of your project directory and then run NPM start. 33 00:02:16,840 --> 00:02:20,950 So we're now essentially trying to start up two copies of our re-act application. 34 00:02:21,220 --> 00:02:23,790 The second copy is going to show me a message like this right here. 35 00:02:23,870 --> 00:02:27,370 And so it's telling me hey there's something already running on port three thousand. 36 00:02:27,760 --> 00:02:32,860 If you see this message you can either stop the other server or you can say yeah go ahead and run my 37 00:02:32,860 --> 00:02:35,220 re-act application on another port. 38 00:02:35,260 --> 00:02:36,440 So I'd put in yes. 39 00:02:36,610 --> 00:02:40,140 And then it will start up on port three thousand one instead. 40 00:02:40,600 --> 00:02:43,810 So if you already have something running on port three thousand on your computer. 41 00:02:43,900 --> 00:02:48,560 Just be aware that you might have to use a slightly different port. 42 00:02:48,570 --> 00:02:53,950 Now the second problem that you might run into will be local those 3000 not working. 43 00:02:54,090 --> 00:02:59,310 So you might get this new tab open up like so you know we'll try to go to a local host 3000 but it won't 44 00:02:59,310 --> 00:03:04,800 actually show anything on the screen if that's the case then a very easy workaround is to go back over 45 00:03:04,800 --> 00:03:05,790 to your terminal. 46 00:03:05,990 --> 00:03:12,120 Why this message right here where it says on your network and then you can visit that address instead 47 00:03:12,120 --> 00:03:14,210 of the local host 3000. 48 00:03:14,460 --> 00:03:19,380 So I will copy that other address right there and I can visit it inside of my browser just as well and 49 00:03:19,380 --> 00:03:21,790 still see my react application. 50 00:03:21,910 --> 00:03:23,440 OK so that's how we start up our app. 51 00:03:23,470 --> 00:03:24,320 That's how we stop it. 52 00:03:24,340 --> 00:03:26,840 And that's how we restart it again in the future. 53 00:03:26,860 --> 00:03:30,670 Remember these commands right here because we are going to be starting and stopping different re-act 54 00:03:30,670 --> 00:03:33,670 apps throughout this course very very frugally. 55 00:03:33,670 --> 00:03:36,560 All right let's take another pause right here and continue in the next video.