Advent of Code, Let’s go NodeJS

Up to Day 8, my code and examples were done in the dev toolbar in Chrome. This is fantastic way to run some quick code and test things out. However, day 7 and 8 have started getting complex. Large blocks of code are certainly doable in the console, but it gets difficult to keep track of variables and to debug it.

Let’s move to using real development tools.

VSCode

VSCode, Visual Studio Code by Microsoft, is a GREAT development tool. There are others out there, but I highly recommend VSCode. This will let us edit our JavaScript with helper tools like intellitype (little menu appears as you type giving you options for properties and such), formatting, inline errors, debugging and more!

Go ahead and download it!

I suggest installing the ESLint extension, and walk through the basic config set up. ESLint allows VSCode to tell you about errors and weird coding issues before you troubleshoot for the next 30 minutes because a comma is missing. If you’d like to see my .eslintrc config, leave a comment and I can share it.

NodeJs

NodeJS is a JavaScript runtime engine. It allows us to quickly run code, like we were in the browser, with some differences, but inside of a command line interface, like inside of VSCode, PowerShell (windows), or Terminal (mac). It’s super simple to install and get running.

NodeJs includes npm, which is a package manager for downloading 3rd party libraries and utilities. Npm also allows us to run our script and do some other fun stuff. More on that below.

Go download nodejs and install it.

Bringing it together

Create your space in VSCode

Once VSCode and NodeJS are installed, it’s quite simple to get started.

Create a folder of where you’d like to store your code and files. Quick tip, don’t put it in a folder that is sync’d with the cloud. Don’t put it in a OneDrive or Google Drive folder. When we pull in 3rd party libraries via npm, they could potentially install hundreds to thousands of files in a library folder, and your sync tool will hate you for ever. Trust me, I did it.

Open that folder in VSCode.

Add a file, folder, whatever. Maybe a folder for each day? Here’s my folder structure:

Each folder here has an .html file in it, as I was using this just to share the final output. See day 1 for example.

The extra folders and files:

• /icon has my web icon seen in the github pages
• /styles are some CSS files to make my pages prettier in github pages
• .eslintrc.json is my ESLint configuration
• index.html is the default landing page for my github pages
• LICENSE and README.md are used in github itself, not needed if you’re not sharing online

I’m writing this before I start day 9…

Create your JavaScript file

I created day9.js, let’s edit that directly, and throw in some code:

let counter = 0
const characters = ['Luke Skywalker', 'Rey Skywalker', 'Jar Jar Binks', 'Grogu']

characters.forEach((c) => {
  console.log(c)
  counter += 1
})

console.warn(counter, 'total characters')

Let’s see ESLint in action. This is why I recommend it, it’s awesome. When I hit save (with Format on Save enabled in VSCode settings), the code gets cleaned up by ESLint following its rules. Also, ESLint is showing me some issues with my code, isn’t that nice?

Run your code

To run this code, I can go down to Terminal at the bottom of VSCode. If you don’t see it, go to the Terminal menu and select New Terminal.

Here’s the magic: type in node ./day9/day9.js (or whatever your file is).

BLAM IT RUNS!

Debugging your code

And finally, let’s debug this code. Click the Debug button on the left, its the Play button with a bug on it.

Select JavaScript Debug Terminal. This will open a new terminal window at the bottom. Note the top right of the Terminal window shows you “2: JavaScript Debug Terminal”.

Now run the same command, node ./day9/day9.js

Note the added text around it, it ran in debug mode! Rather uneventful. J/k, let’s debug it for real.

In the editor, set a breakpoint on the code, where you’d like the debugger to stop. Hover over the line number you’d like to debug, you’ll see a small red circle, now click that and it becomes a solid red.

Run the same command again in the debug terminal. The code will stop at that line, now go move your mouse over it and interact with stuff!

When you’re done, you can press the play button in the debug toolbar at the top, and it’ll continue to run the code. However, like in this example, I put a breakpoint in a loop, so clear the breakpoint and it’ll keep running.

Pretty awesome, eh? Debugging should help us get through some of these more complex challenges ahead!

Set up npm

Remember I mentioned npm. Now let’s use it. To get started, type in npm ini in the terminal window in VSCode. Just hit enter until you’re all the way through, accepting all of the defaults.

This will add a file called package.json, that configures npm for this folder. This file will get updated now and again, we may go in and edit it, maybe. Just be aware that it’s there.

We want npm in here so we can use its package library. Above, when we were running our code, we had to run the node file.js command every time, after every change. That WILL get annoyingly slow quickly. Fortunately, there’s a fix for that. There’s a utility called nodemon (said like “node mon”, not “no demon”) that will allow node to monitor your file, and auto-run it when it is saved. Awesome, right?! Let’s install it.

Go to terminal, enter npm install -g nodemon. This will run through, download a slew of files, and add the library to that package.json file. Now it’s available for us to use!

Use the command nodemon instead of node to run your code: nodemon ./day9./day9.js. You’ll see the output from out previous code, and some new lines stating it’s “waiting for changes”. Go ahead, make a change in your code and hit save, see it run!

That’s it!

I hope this was an easy enough walk-through for getting started with VSCode and NodeJS. As we go through the rest of AoC, I’ll make sure to highlight any changes to what we learned here. Do feel free to post questions below in my comments section, Google them, or hit up stackoverflow.com to ask there.

I look forward to us making some great progress in the coming challenges. Thanks for joining!