In this lesson, we're going to be walking through how to set up our development environment and the
tools that are going to be used in the upcoming lessons to present the course content.
So first of all, you are going to need an editor.
The editor that I'm going to be using within this course is the Visual Studio Code.
It's available at Code Dot Visual Studio, dot com.
This is an open source, Ed.
There's a mock version, Windows and Linux version.
Now, you don't have to use the same editor as I'm using.
If you're comfortable with your editor, if you already have one that you like, that you can go ahead
and stick to that one.
Or if you want to try something new and haven't tried Visual Studio code, then you can try this one.
And one of the nice things and the benefits of Visual Studio Code is that it's got some really nice
add ons.
And one of the add ons that we're going to be making use of is the live server add on.
So this is an add on.
That is also a node package that is available.
You can download it separately or you can download it within the Visual Studio code as an add on.
And what this does is this allows us to run a live server, a local machine server directly on our computer.
And a lot of times the reasons that we want to run a live server is specifically if we are making AJAX
requests, a lot of them won't work with the file protocol.
And that's where we need to use the HTP protocol.
And having a live server allows you to do that.
So if you're having any type of security restrictions on the server, when you're fetching the content
using JavaScript, this sometimes is the case that it's going to throw an error with the AJAX requests.
So also having the page reload automatically after the file is updated and changed is also a nice benefit.
When you are developing that, you can see that changes in a real time.
So let's go ahead and set that up.
And I'm opening up the workspace for the Visual Studio Code.
So this is just a window that I've got just above my browser window.
So it's just slightly minimized so we can see the browser tabs at the top and I can also easily switch
between them.
So the difference between the file protocol and the HTP protocol is that the file protocol is the one
that uses the file in the beginning.
So this is directed within your local computer space and you're going to see that wherever the file
is located on your computer, that's the path that's going to be within the Web browser as opposed to
running it within a local machine where the code is actually going to be sitting within an IP address.
So it's going to be simulating what you see on the server.
So let's go ahead and set up some code.
So great, some basic HTML container code, and that's including the head and also a title and I'll
just call it JavaScript demo.
And then from here, let's set up the body tags.
And just before we close off the body tags, we're going to link out to an updated case file.
So it's going to be the JavaScript file that we're going to be working with and connecting the.
HTML two also creating a div, give it a class of output, and that will give us a container that we
can output some content into.
So when we refresh the page, we're not going to see anything.
We do see the title there.
Also, I am using Chrome.
Chrome comes with developer tools, so developer tools are handy tools that you can make use of to help
while you're developing web applications.
And with Chrome that come standard and built in, you can access it either by clicking on the page,
right.
Clicking and doing the inspect.
And that's going to open up the developer tools console.
There's also automatic control.
Click anywhere and inspect and there's also in the top right hand corner if you go to more tools and
hit the developer tools.
And there's also a shortcut as well for that.
And that's going to open up the developer tools window.
And within the developer tools window, there's a few customizations.
So you can get to the bottom, you can talk to the left, you can document a separate window, and by
default, it's going to be talked over to the right.
And there's a lot more information here that you can do with the tools.
So what we're do is we'll just minimize this slightly.
And we already do see that there's an error within the console and it says that the app file is not
found and that's because we're linking to it.
But we haven't created it yet.
So let's go ahead and create a new file.
So file and just save this one in the same folder directory.
So do a save as and save that as that app just so that we have a place to write the JavaScript code.
So when I refresh this, the error goes away and everything is good.
So now go into the.
Code and under preferences and then hit the extensions, and that's going to open up the different extensions
that you can install within your visual studio code.
I do have a few that are installed.
I've got the beautify in the lint.
So these are just ones that I use on a regular basis that help me clean up the code.
So I indents it and it looks more readable.
And then the one that we want to focus on in this lesson is the live server.
So the live server, if you don't have it installed, you can search the extensions and just type in
search a live server and that's going to return back the live server.
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
just make sure that it's installed.
If it's not installed, go ahead and do the install on it.
If it's disabled, go ahead and enable it.
And once you have the live server extension running, you should be able to go into your index file
and right.
Click or control click and open the live server.
Sometimes you do need to add the file or the folder to the workspace for it to work.
So let's go ahead and try open the live server and see what happens.
So what this does is this opens up on the HTP protocol.
So it gives us an IP address, it gives us a port that we're using and then the file that we're using
for development.
And I'm going to also open up the dev tools console.
And then we've got the code there and you're always going to see that it's missing the father icon icon.
So this will go away if you refresh it.
So it's sometimes questions that I get about why they see that.
And that's because the default for the Web browser is it looks for that icon and that's that little
icon that you see up here in the tabs at the top for most websites.
And because we're just developing some code and focused on JavaScript, we're not going to include that
into the code.
So now when we make some changes to our codes, let's type in and do two and save.
When you look at the browser tabs, the Demo two has now been updating the title, whereas on the file
protocol there's been no updates.
So that's another advantage to using live server is that whatever you update, you're going to see it
live immediately on your page.
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
refresh the page, it all automatically add the content and update the content on the page.
There's also this message here within the Visual Studio Code that shows that the live server is up and
running.
So before the next lesson, where we're going to dive right into JavaScript and start coding JavaScript,
make sure that you have your basic container for the HTML set up linking to a JavaScript file that you
can write code into.
And then also if you want to use the visual studio code and it is suggested that you do set up the live
server so that you can have that same type of setup that I have.
And when we get more into making the Ajax requests, sometimes they do throw the error.
So it is suggested that you do go with either a live server or any type of other local machine server.
And if you don't want to use visual studio code, you can also download node.
Now download the live server package and do an install using the NPM install on live server and then
you just have to navigate over to the directory that you are using and you want to run the server on
and then you can from your terminal, start the server from that way as well.
So let's get set up and started coding in the upcoming lesson.