1.2 What You Need

Before we dive into functional programming, let's first of all set up a nice little web oriented environment. Because when it comes to any type of web development in this particular case, it's JavaScript, I like having a realistic environment. That means having an HTTP server. Serving files over HTTP and all of that wonderful stuff. Because especially if you plan on doing anything with HTTP, like making requests with JavaScript, you need a web environment. So for JavaScript I like using node because very easy to get up and running very quickly without a whole lot of configuration. So if you don't have it installed already, go to nodejs.org and download the recommended or the LTS version. LTS just stands for long term support. That means it's going to be supported for a very long time. The installation is very straightforward. Just take the defaults and you will be good to go, so that once you have that done then you're 75% there. Now something else that should be pointed out is a code editor. Now, I'm using Visual Studio Code which is, it's not even arguably, it is the best development environment for JavaScript, so I highly recommend that you use Visual Studio Code. You can of course use whatever you want. There are plenty of code editors available. There's Atom, Brackets, Sublime Text and a whole host of others. Many of them are free. Many of them are not free. Visual Studio Code is free, it's also cross-platform, so I highly recommend that. And once you have those things then you can close your browser, at least temporarily because we will eventually get back to the browser. But then you will want to open up a command line and you will want to make a directory for this particular project, I'm going to call this jsfp, and then you will want to cd into that folder and then type a command npm init- y. This is going to essentially set up a node project for us, and the dash y just sets all of the default values otherwise you would have to go through and set them individually. Then once that's done, just fire up your code editor. And we can get started. The first thing I want to do is create a new file called bs-config.js. This is going to be a config file for a package that we are about to install. So go back to the command line. Run npm install lite-server --save-dev. This is a very simple HTTP server that will, well it's an HTTP server. There's really nothing a [LAUGH] whole lot there except that it will automatically track changes to our files and it will automatically refresh the page. So that we don't have to constantly save a file, go to the browser, press refresh, and so on and so forth. So there's a few things that I want to set here. The first is a property called open. Now this is a JSON file, at least it should be. I named that js. The file name is bs-config.json. So this is a JSON file, so be sure to use JSON syntax. And so the first option is going to be open. We're gonna set that to false, otherwise it will automatically open up a browser whenever we run the server and I don't want to do that. The second option, is called server. And this is going to be an object, that's going to have a property called base directory or baseDir. And we're gonna set this to ./public. So this is telling the server that all of our files are going to be inside of a folder called public. And so it's going to start serving the files inside of that folder. And those are really the only two options. So with that done, you can close that. And then we want to go to this package.json file. This was created whenever we ran that npm init command, you can see that there's this dev dependencies where lite-server is installed. But we want to come up here to scripts. And we want to add a script, we'll just call it start. And all the value for this is going to be simply lite-server so that we can get our server up and running by running an npm command called start and we will do that in a moment. So now we just need to create our folder called public. Let's create a new file inside there called index.html. Let's give it some HTML and let's put some text in the body just so we can see that this is going to work. Let's go back to the command line and we will say npm run start. This is going to start up our web server. It's also going to tell us where to go. So we can see that we need to go to localhost at Port 3000. So we'll hop back over to the browser. Localhost 3000 and there is our file. So our environment is up and running. We are ready to start in the next lesson.