1.2 Setting Up Your Environment

Before we begin, I want to go over the environment that you're going to see onscreen. Now, it's not my intention to convince you to use a similar environment. However, I do want to point out that some of the tools that I use are widely used throughout the web development community. In fact, the first one is pretty much standard and that is Node.js. Now Node is a JavaScript runtime environment, that's means that you can write applications With JavaScript that can be desktop applications, console applications, or even web applications. And one of the beautiful things about Node.js is that it's cross platform. So you can write an application and target Windows, Mac OS, and Linux. So as you gain confidence in your development skills this might be something that you want to look at. And in fact one of the other tools that we're going to be using or that I am going to be using is called Visual Studio code. It is a code editor written as a node application. So everything that I just said about being cross-platform and being a desktop application, that is true of Visual Studio Code. Now the reason why I use Visual Studio Code is because it is the best tool for JavaScript development. It just is. That's not an opinion, that is just how it is. So if you want the best tooling for JavaScript, then Visual Studio Code is the code editor that you want to use. Now if you already have a code editor and you like it, feel free to use that. There's nothing wrong with that. But if you find yours a little lacking, then give Visual Studio Code a try. The installation is very straight forward. Just take the defaults and you're good to go. The same is true for Node.js. Now the reason why we're going to install Node.js is so that we have access to what's called Node Package Manager or NPM. And this is really what we installed Node for, at least for web development because we use NPM to manage our dependencies like jQuery or any other type of library that we want to use within our applications. But we also use it to run different tasks like we can bundle all of our JavaScript into a single file using a tool through NPM, or we can minify our code, or we can transform it into something else. So there's a lot of things that we can do with the tools that NPM gives us access to. So what you want to do is install the LTS version. You can see that there are two. The LTS version sends for a long term support. This is the more stable version. Now that's not to say that the current version is unstable. But the current version is where new features are added to the platform and where those features are hardened. So yeah, it's not as stable as the LTS. So just install the LTS and you are good to go. Once again the installation is straight forward just set the defaults, and you're good to go. Now, NPM is a command line tool. So once you get Node installed, the next thing that you're going to want to do is fire up your command line because we are going to create a project which is basically just a folder. So let's go ahead and do that, I'm going to make a directory called formval and I'm going to cd into formval and we're going to run npm init I-N-I-T, and you can hit Enter here but it's going to ask you questions. And you can answer those questions or you can just hit the Enter key and it will provide the default answers. However, if we just say -y, it's going to answer all of those with the default answers anyways. So whenever I create a new project, which is what we just did, then I just typically say npm init -y. Now you can see that it wrote some stuff to the console, this is actually the contents of a file called package.json. So I'm going to fire up my code editor and we can look at that file, which is a JSON file. Now there are several things inside of this file that are going to change. But I wanted to at least point out that, what you see here is what you see on screen in the command line, but that is going to change because the next thing that we're going to do is install an HTTP server. So we're going to say npm install and this is called lite-server, but we're going to follow that up with --save-dev. Now, when it comes to our projects we have what are just typical dependencies. These are things that our application needs in order to run. So if we used Bootstrap or if we use jQuery, those are dependencies that we would then need our application to run. But then there are Dev dependencies. These are things that aren't necessary for our application to run but they are used in the process of developing our project, and the next thing we're going to do, is create a new file. So I'm going to pull up the command palette and for Windows and probably for Linux, that is Ctrl+Shift+P, for MacOS that is Command+P. And then I'm going to type New file, that's going to create a new file and this is going to be called BS-config.json. This is a configuration file for the HTTP server that we just installed. And there are several options that we can set but the two that I am going to set, the first is an object called server, and this is going to have a property called baseDir. Because we want to tell our HTTP server where to look for all of the files that are going to be served. And I'm going to say that those files are going to be inside of a folder called public. So we don't have that, but we will create that here in a moment. So this means that all of our HTML files, all of our JavaScript, all of our CSS, anything that we want to be served by our HTTP server, needs to be inside of this public folder. The other option that I'm going to set is called open, because whenever you first start, the HTTP server, it will automatically open up your default browser. Now, that might be behavior that you want, but I always have the browser open, so I'm going to set open to false because I don't need it to open up the browser every time that I start the HTTP server. And that's all that we are going to do for the configuration for this HTTP server. So the only other thing that I'm going to do then is open up package.json again. And you can see that there is this section called scripts. One of the really cool things about NPM is that we can define scripts so that if we wanted a script for a processing all of our code, linting it or bundling or things like that, we can write our own scripts to do all of those different types of tasks. What I want to do is just create a script that is going to start our HTTP server. So I'm going to just call it server. And then we say the command that we want to run, and in this case, it is simply going to be "lite-server". And it will automatically pull in its own configuration from that file that we just created, and then we will be good to go. So we do need to create that folder. I'm going to open up the command pallet once again. Once again, that's Ctrl+Shift+P or Cmd+P on Mac OS. And this folder is going to pick up called public. Now we need a new file called index HTML so that we have something to display and we're going to pre-populate that with an HTML document. We'll say Hello, App! And then from the command line, we will run our server. So we will say npm run server. So this is going to run that script called server that we wrote or that we defined inside of package.json. And we are going to see the output of the HTTP server. We can see that the URL is localhost at port 3000. So let's fire-up the browser. We will go to that location, and then we will see our index HTML file. So we have the environment all set up. The next thing we need to do is create out form and start validating the fields. And we will start with that in the next lesson.