1 00:00:00,150 --> 00:00:05,970 In this lesson, we're going to be walking through how to set up our development environment and the 2 00:00:05,970 --> 00:00:09,830 tools that are going to be used in the upcoming lessons to present the course content. 3 00:00:10,200 --> 00:00:12,390 So first of all, you are going to need an editor. 4 00:00:12,570 --> 00:00:16,890 The editor that I'm going to be using within this course is the Visual Studio Code. 5 00:00:17,130 --> 00:00:20,070 It's available at Code Dot Visual Studio, dot com. 6 00:00:20,250 --> 00:00:21,840 This is an open source, Ed. 7 00:00:21,840 --> 00:00:24,790 There's a mock version, Windows and Linux version. 8 00:00:25,110 --> 00:00:28,320 Now, you don't have to use the same editor as I'm using. 9 00:00:28,320 --> 00:00:31,830 If you're comfortable with your editor, if you already have one that you like, that you can go ahead 10 00:00:31,830 --> 00:00:32,940 and stick to that one. 11 00:00:33,150 --> 00:00:37,380 Or if you want to try something new and haven't tried Visual Studio code, then you can try this one. 12 00:00:37,680 --> 00:00:42,780 And one of the nice things and the benefits of Visual Studio Code is that it's got some really nice 13 00:00:42,780 --> 00:00:43,290 add ons. 14 00:00:43,500 --> 00:00:47,770 And one of the add ons that we're going to be making use of is the live server add on. 15 00:00:48,030 --> 00:00:49,320 So this is an add on. 16 00:00:49,320 --> 00:00:53,310 That is also a node package that is available. 17 00:00:53,310 --> 00:00:58,170 You can download it separately or you can download it within the Visual Studio code as an add on. 18 00:00:58,410 --> 00:01:06,360 And what this does is this allows us to run a live server, a local machine server directly on our computer. 19 00:01:06,510 --> 00:01:13,380 And a lot of times the reasons that we want to run a live server is specifically if we are making AJAX 20 00:01:13,380 --> 00:01:16,440 requests, a lot of them won't work with the file protocol. 21 00:01:16,620 --> 00:01:19,530 And that's where we need to use the HTP protocol. 22 00:01:19,650 --> 00:01:22,350 And having a live server allows you to do that. 23 00:01:22,530 --> 00:01:27,450 So if you're having any type of security restrictions on the server, when you're fetching the content 24 00:01:27,450 --> 00:01:32,750 using JavaScript, this sometimes is the case that it's going to throw an error with the AJAX requests. 25 00:01:33,090 --> 00:01:40,050 So also having the page reload automatically after the file is updated and changed is also a nice benefit. 26 00:01:40,050 --> 00:01:43,770 When you are developing that, you can see that changes in a real time. 27 00:01:43,990 --> 00:01:45,660 So let's go ahead and set that up. 28 00:01:45,660 --> 00:01:49,790 And I'm opening up the workspace for the Visual Studio Code. 29 00:01:49,800 --> 00:01:54,050 So this is just a window that I've got just above my browser window. 30 00:01:54,270 --> 00:01:59,880 So it's just slightly minimized so we can see the browser tabs at the top and I can also easily switch 31 00:01:59,880 --> 00:02:00,480 between them. 32 00:02:00,810 --> 00:02:06,840 So the difference between the file protocol and the HTP protocol is that the file protocol is the one 33 00:02:06,840 --> 00:02:09,100 that uses the file in the beginning. 34 00:02:09,390 --> 00:02:15,630 So this is directed within your local computer space and you're going to see that wherever the file 35 00:02:15,630 --> 00:02:21,030 is located on your computer, that's the path that's going to be within the Web browser as opposed to 36 00:02:21,210 --> 00:02:28,130 running it within a local machine where the code is actually going to be sitting within an IP address. 37 00:02:28,140 --> 00:02:30,620 So it's going to be simulating what you see on the server. 38 00:02:30,870 --> 00:02:33,240 So let's go ahead and set up some code. 39 00:02:33,240 --> 00:02:42,270 So great, some basic HTML container code, and that's including the head and also a title and I'll 40 00:02:42,270 --> 00:02:44,250 just call it JavaScript demo. 41 00:02:44,820 --> 00:02:48,150 And then from here, let's set up the body tags. 42 00:02:48,390 --> 00:02:54,720 And just before we close off the body tags, we're going to link out to an updated case file. 43 00:02:54,930 --> 00:02:58,860 So it's going to be the JavaScript file that we're going to be working with and connecting the. 44 00:03:00,550 --> 00:03:08,560 HTML two also creating a div, give it a class of output, and that will give us a container that we 45 00:03:08,560 --> 00:03:10,330 can output some content into. 46 00:03:10,960 --> 00:03:14,100 So when we refresh the page, we're not going to see anything. 47 00:03:14,110 --> 00:03:15,370 We do see the title there. 48 00:03:15,670 --> 00:03:17,560 Also, I am using Chrome. 49 00:03:17,560 --> 00:03:23,590 Chrome comes with developer tools, so developer tools are handy tools that you can make use of to help 50 00:03:23,590 --> 00:03:25,900 while you're developing web applications. 51 00:03:26,170 --> 00:03:31,870 And with Chrome that come standard and built in, you can access it either by clicking on the page, 52 00:03:31,870 --> 00:03:32,080 right. 53 00:03:32,080 --> 00:03:34,540 Clicking and doing the inspect. 54 00:03:34,540 --> 00:03:37,020 And that's going to open up the developer tools console. 55 00:03:37,540 --> 00:03:39,640 There's also automatic control. 56 00:03:39,640 --> 00:03:45,310 Click anywhere and inspect and there's also in the top right hand corner if you go to more tools and 57 00:03:45,310 --> 00:03:46,480 hit the developer tools. 58 00:03:46,480 --> 00:03:48,490 And there's also a shortcut as well for that. 59 00:03:48,700 --> 00:03:51,190 And that's going to open up the developer tools window. 60 00:03:51,460 --> 00:03:54,760 And within the developer tools window, there's a few customizations. 61 00:03:54,940 --> 00:03:59,950 So you can get to the bottom, you can talk to the left, you can document a separate window, and by 62 00:03:59,950 --> 00:04:02,020 default, it's going to be talked over to the right. 63 00:04:02,350 --> 00:04:05,600 And there's a lot more information here that you can do with the tools. 64 00:04:05,920 --> 00:04:09,940 So what we're do is we'll just minimize this slightly. 65 00:04:10,090 --> 00:04:16,210 And we already do see that there's an error within the console and it says that the app file is not 66 00:04:16,210 --> 00:04:18,550 found and that's because we're linking to it. 67 00:04:18,550 --> 00:04:19,900 But we haven't created it yet. 68 00:04:20,140 --> 00:04:22,090 So let's go ahead and create a new file. 69 00:04:22,210 --> 00:04:26,170 So file and just save this one in the same folder directory. 70 00:04:26,440 --> 00:04:33,700 So do a save as and save that as that app just so that we have a place to write the JavaScript code. 71 00:04:34,060 --> 00:04:38,340 So when I refresh this, the error goes away and everything is good. 72 00:04:38,710 --> 00:04:40,570 So now go into the. 73 00:04:41,620 --> 00:04:50,470 Code and under preferences and then hit the extensions, and that's going to open up the different extensions 74 00:04:50,470 --> 00:04:53,680 that you can install within your visual studio code. 75 00:04:53,860 --> 00:04:55,590 I do have a few that are installed. 76 00:04:55,600 --> 00:04:57,910 I've got the beautify in the lint. 77 00:04:58,420 --> 00:05:02,920 So these are just ones that I use on a regular basis that help me clean up the code. 78 00:05:02,920 --> 00:05:06,070 So I indents it and it looks more readable. 79 00:05:06,250 --> 00:05:10,480 And then the one that we want to focus on in this lesson is the live server. 80 00:05:10,720 --> 00:05:16,750 So the live server, if you don't have it installed, you can search the extensions and just type in 81 00:05:17,020 --> 00:05:21,160 search a live server and that's going to return back the live server. 82 00:05:21,310 --> 00:05:28,330 And it's this one here by Ritwik Day that we want to be using that I'm going to be using as well and 83 00:05:28,600 --> 00:05:30,310 just make sure that it's installed. 84 00:05:30,310 --> 00:05:32,920 If it's not installed, go ahead and do the install on it. 85 00:05:33,130 --> 00:05:35,700 If it's disabled, go ahead and enable it. 86 00:05:35,980 --> 00:05:42,850 And once you have the live server extension running, you should be able to go into your index file 87 00:05:43,060 --> 00:05:43,930 and right. 88 00:05:43,930 --> 00:05:48,550 Click or control click and open the live server. 89 00:05:48,700 --> 00:05:54,490 Sometimes you do need to add the file or the folder to the workspace for it to work. 90 00:05:55,000 --> 00:05:58,720 So let's go ahead and try open the live server and see what happens. 91 00:05:59,350 --> 00:06:03,940 So what this does is this opens up on the HTP protocol. 92 00:06:03,950 --> 00:06:11,080 So it gives us an IP address, it gives us a port that we're using and then the file that we're using 93 00:06:11,290 --> 00:06:12,520 for development. 94 00:06:12,520 --> 00:06:16,480 And I'm going to also open up the dev tools console. 95 00:06:16,480 --> 00:06:23,200 And then we've got the code there and you're always going to see that it's missing the father icon icon. 96 00:06:23,680 --> 00:06:25,990 So this will go away if you refresh it. 97 00:06:26,180 --> 00:06:30,700 So it's sometimes questions that I get about why they see that. 98 00:06:30,820 --> 00:06:36,970 And that's because the default for the Web browser is it looks for that icon and that's that little 99 00:06:36,970 --> 00:06:41,020 icon that you see up here in the tabs at the top for most websites. 100 00:06:41,200 --> 00:06:46,690 And because we're just developing some code and focused on JavaScript, we're not going to include that 101 00:06:46,900 --> 00:06:47,800 into the code. 102 00:06:48,220 --> 00:06:58,570 So now when we make some changes to our codes, let's type in and do two and save. 103 00:06:59,260 --> 00:07:07,540 When you look at the browser tabs, the Demo two has now been updating the title, whereas on the file 104 00:07:07,540 --> 00:07:09,400 protocol there's been no updates. 105 00:07:09,700 --> 00:07:15,640 So that's another advantage to using live server is that whatever you update, you're going to see it 106 00:07:15,640 --> 00:07:17,440 live immediately on your page. 107 00:07:17,650 --> 00:07:26,650 And that also goes to if you add in some code and you save it and once you see that you don't need to 108 00:07:26,650 --> 00:07:32,550 refresh the page, it all automatically add the content and update the content on the page. 109 00:07:33,040 --> 00:07:38,740 There's also this message here within the Visual Studio Code that shows that the live server is up and 110 00:07:38,740 --> 00:07:39,070 running. 111 00:07:39,520 --> 00:07:45,640 So before the next lesson, where we're going to dive right into JavaScript and start coding JavaScript, 112 00:07:45,790 --> 00:07:51,970 make sure that you have your basic container for the HTML set up linking to a JavaScript file that you 113 00:07:51,970 --> 00:07:53,190 can write code into. 114 00:07:53,470 --> 00:08:00,070 And then also if you want to use the visual studio code and it is suggested that you do set up the live 115 00:08:00,070 --> 00:08:04,470 server so that you can have that same type of setup that I have. 116 00:08:04,480 --> 00:08:10,000 And when we get more into making the Ajax requests, sometimes they do throw the error. 117 00:08:10,040 --> 00:08:16,420 So it is suggested that you do go with either a live server or any type of other local machine server. 118 00:08:17,230 --> 00:08:21,220 And if you don't want to use visual studio code, you can also download node. 119 00:08:21,700 --> 00:08:29,650 Now download the live server package and do an install using the NPM install on live server and then 120 00:08:29,650 --> 00:08:37,120 you just have to navigate over to the directory that you are using and you want to run the server on 121 00:08:37,270 --> 00:08:41,880 and then you can from your terminal, start the server from that way as well. 122 00:08:42,940 --> 00:08:46,660 So let's get set up and started coding in the upcoming lesson.