I’m already proud of you. It doesn’t matter why you’re learning to code, but that you are learning to code. Maybe you’ll love it; maybe you won’t. Getting started on anything new is always the most scary part, but you’re here! Doing. The hardest part — believe it or not — is over. You’re going to find that there’s nothing overly intimidating about working with code, and it shouldn’t stir the imagination to images of overly verbose text on bright monitors in the darkened room of someone’s basement (okay, that was definitely a thing 10 years ago).

Follow this post along to the end, and you’ll have most of what you need to accomplish most posts that I’ll be writing on this site. We need to go over some bare essentials before we can start creating applications, games, or websites, and the very first necessity — and the purpose of this post — is a “dev environment.”

Just as the painter needs an easel, canvas, paints, and a studio to work in, so too must a developer have a development environment.

What’s a “Dev Environment”?

The analogy that I like to use is that of a painter. Just as the painter needs an easel, canvas, paints, and a studio to work in, so too must a developer have a development environment (“dev environment” for short). In short, it’s the set of tools that you’ll use to write code.

As you progress and mature as a developer you’ll most certainly modify not only the tools that you use, but the workflow as well. In fact, you’ll modify them many times. Let’s keep it simple for now. We’re going to setup three things — only three — which will give us just enough to continue in future posts.

Here’s what we’ll need:

  1. Code editing software is commonly refered to as integrated development environments (“IDE” for short), and it really just refers to a piece of software that provides some extra conveniences over Notepad. For example, most projects require that you create more than one file of code, and it’s very helpful to have a full view of those files to switch back and forth between them. This is something that an IDE can give you over a more barebones program like Notepad. We’ll be installing Microsoft’s VSCode as our IDE.

  2. Package managers allow us to easily access and grab additional pieces of code that we can use in our projects to accomplish one or more common tasks. Imagine building a bicycle, and forgetting to buy the handle grips or the brake levers for the handles. You could make your own, or check to see if a friend has extras. The same holds true when we’re writing code. Instead of making our own pieces, we can simply have the package manager find those small pieces for us and bring them into our project. As most of our projects will be in the browser we’ll be installing and using NPM, which is part of NodeJS. NPM stands for — of course — NodeJS Package Manager, or just Node Package Manager for short.

  3. Web servers are — going back to our painter analogy — the easel that we use to hold our canvas while we’re painting. Just like a painter using an easel in a studio, no one gets to see the work-in-progress before it’s complete. When our masterpiece is finally finished, we’ll move our canvas from our private easel to a gallery or museum wall, which is a public web server. We need web servers simply because our browsers don’t allow us to fully open and use files stored on our computers. That would be a big security risk, so they just don’t allow it. We’re going to use our package manager to pull down a piece of code that we can reuse over and over for any projects.

I know I said three, and I meant it. There’s just one more that will make your life a whole lot easier if you don’t already have it. It’s optional, so feel free to skip over it if you want.

  1. Google Chrome is my browser of choice. I’ll get into the why in a later post, but if you use a browser other than Chrome while following along you may find that your output doesn’t exactly match mine, even if your code is identical.

Alright. That’s it. I promise!

Installing VSCode

  1. Open a web browser, whether that’s Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari… you get the idea. We’re going to the internet!

  2. In your browser’s address bar, type code.visualstudio.com, and hit the Enter key.

  3. After the page loads you’ll see something like the image below. We’re going to click that big chunky green button that says “Download for Windows” (if you’re not using Windows you’ll see something slightly different).

    The VSCode download site
    The VSCode site

  4. Once the download is finished your screen should look something like this. Go ahead and click on the file download, as highlighted in the image. That’ll kick off the install for VSCode.

    The VSCode download site
    Download complete!

  5. You’ll almost certainly get a pop-up from Windows asking, “Do you want to allow this app to make changes to your device?” Click Yes.

  6. The next window to appear will be one of two things: VSCode’s installation introduction if you’re using Windows, or a window showing the VSCode icon and the Applications folder if you’re using macOS. If you’re fortunate enough to be using macOS, just drag the VSCode icon into the Applications folder. That’s it. You’re done with installing VSCode. Move onto NodeJS. If you’re using Windows, however, we’ve got a bit more to do.

    1. “Welcome to the Visual Studio Code Setup Wizard” should be on your screen, and this is here to give you a summary of what you’re about to do. Since we know what we’re about to do, go ahead and click Next >.

      Welcome to installing on Windows!

    2. Now we’re at the “License Agreement” screen. This looks like a bunch of gibberish, but for the most part it’s here to make sure that you agree to not steal from Microsoft or use VSCode to blow up your neighbor’s dog or something. They’re extremely common, but if you’re ever in doubt ask an adult or legal professional. Click the circle next to I accept the agreement, and then click Next >.

      That sweet, sweet legal garbage.

    3. VSCode wants to put some files on your computer, and it’s asking you to “Select Destination Location” for where it should put them. If you don’t already know that you have to change the location, then you don’t need to change the location. Easy peezy. Click Next >.

      Choose where VSCode will live on your computer.

    4. It’s pretty standard to put installed applications into your Windows Start Menu, which is why the “Select Start Menu Folder” is here… so you can choose a custom name for it if you want, or even to not put it into the Start Menu at all (if you put a checkmark in that option). Go ahead and click Next >.

      Or just put it in your Start Menu as "Pure Sugar".

    5. We need to “Select Additional Tasks” on this screen, and ideally you’ll just leave the options as-is. If you do want to be able to launch VSCode from your Windows Desktop, feel free to put a checkmark in that top box, but everything beneath the “Other” category should already be checkmarked. Click Next >.

      Probably okay to just leave it as you see it.

    6. Finally. We’re “Ready to Install.” You can use this screen to double-check everything, and then click Install to get this party rockin’.

      Geez, are we THERE yet?!

    7. Doo do doo. Nothing to see here. Just waitin’.

      Just hummin' a little tune.

    8. “Completing the Visual Studio Code Setup Wizard.” We’re done - with this part anyway. Before continuing, let’s uncheck the option labeled “Launch Visual Studio Code.” Having that open while we install NodeJS will just be distracting. Then click Finish.

      Sweet mother of science, it's done!

Installing NodeJS and NPM

A lot of this is going to be very similar to installing VSCode, whether you’re using Windows or macOS.

  1. Grab your browser, and head back out into the open waters of the internet!

  2. In your browser’s address bar, type nodejs.org, and hit the Enter key.

  3. Another big, chunky green button! Click it to start the download. Maybe too many red arrows in this one?

    The NodeJS download site
    Folks love chunky green buttons, right?!

  4. After the download is complete, let’s click it to get the installation started. Follow the red arrow!

    The NodeJS download completed
    Go ahead and open it.

  5. “Welcome to the Node.js Setup Wizard” is a friendly sort of screen, but what it’s really doing is making sure you have enough space on your computer to install NodeJS. You’ll be able to move on when the Next button lights up, and when it does click it.

    Deja vu. Another setup wizard.

  6. “Welcome to the Node.js Setup Wizard” 2, Electric Boogaloo. This is just a summary. Click Next.

    The prequel to "Node.js Setup Wizard" 3, The Nodening

  7. “End-User License Agreement” is just a fancy term for “legal stuff that you have to agree to, or you can’t continue.” It’s the same deal as the last one, so put a checkmark in I accept the terms in the License Agreement, and click Next.

    If only this was paper, I'd have an everlasting supply of kindling.

  8. “Destination Folder”, like VSCode above, is where you choose where NodeJS will store the files that it needs to work. The same idea applies: if you don’t know that you need to change it, you don’t need to change it. Click Next.

    I'd leave this and the next step alone, honestly.

  9. The “Custom Setup” can be left exactly like it is. No changes. Click Next.

    Leave it exactly like this.

  10. Sweet Baby Ray, we’re finally “Ready to install Node.js”! That little shield next to the word “Install” means that Windows is definitely going to prompt you about whether you’d like to allow NodeJS to make changes to your device. Click Install, and then “Yes” on the prompt.

    Stop teasing us, and install already!

  11. We’re “Installing Node.js”! WOOOOOO! I mean… do do doo. Just waiting.

    Whistle while you work...

  12. We “Completed the Node.js Setup Wizard”. After patting yourself on the back, go ahead and click Finish. !["Completed the Node.js Setup Wizard"](//images.ctfassets.net/prmlhuf92zck/60sIwNbY88U4uq8Wga46qY/4341aea993329cda4c1615b26f8721aa/package-manager-6-nodejs-install-8.jpg ”Heavy breathing…)

Installing a Web Server Package

The traditional way of setting up a web server on your personal computer is a bit of a pain, and depending on whether you’re using Windows, macOS, or Linux… for the most part they’re all different processes with different steps, and it’s just not something you want to mess with at this point.

We’re going to take the more efficient route. I don’t even need to list these out in ordered steps, since there’s only, like, two of them.

Let’s open Command Prompt. The easy(ish) way to do this is to click on the Cortana button in Windows, or — if you’re using macOS — click the search icon at the top-right corner of your screen (it’s a magnifying glass).

When you get the search text box, type:

  • macOS: terminal
  • Windows: cmd

The very top result in the search results is what you want. Click it.

On Windows that looks like this:

I'll show you a better way to do this in the next post.

Once you have Command Prompt/Terminal open, we’re going to globally install a JavaScript package. I’ll explain more below, but for now, type the following into the Command Prompt or Terminal window:

npm install -g live-server

On Windows that looks like this:

This will be useful later.

Press Enter.

So what’d we just do? Well, earlier I mentioned Node Package Manager (“npm”). The command we just issued in Command Prompt told Node Package Manager to install a package called “live-server”, and we included a funny little -g in there to mean that we want it to be available for every project that we create on our computer from now on. We won’t need to keep installing “live-server,” and you’ll see what I mean by that in my next post.

Which will be soon.

Pinky swear.

:)