Hi there, my name is Tom and I’ll walk you through the very basics of Node.js and NPM, including explanations on how to develop for the web in general. Just a note upfront: if you’re familiar with basic web development and NPM, you can skip this article and learn more about the very useful NPX here.
Ok, great! Let’s start!
- Directly to the running Node-process, line by line, no files included
Line by line
After you’ve successfully installed Node.js (which is just downloading + running the installer, descriptions are on Node’s website), you can start-up Node.js from everywhere in either your Terminal (macOS/Linux) or PowerShell (Windows). The command looks like this:
Yeah, that’s all! You’ve just successfully launched Node! Did you notice how fast this happened? One of the reasons Node.js is so popular is precisely because of its blazingly fast bootup (among other things).
(Hit enter after every line end) const greet = (name) => console.log("Hello, " + name); greet("Tom"); let x = 10; x = x + 5; (enter the following line to terminate node) .exit
Now that’s all fine and dandy, but writing larger apps requires us first draft them in files before feeding to Node. Next chapter, please!
Input via files
For this example you need a text editor. Basically you can use every program that can manipulate text (such as TextEdit on macOS or Editor on Windows). I recommend the open source VS Code from Microsoft, but you can choose whatever fits your ergonomics best.
To provide a file as input, we’ll just have to create one. Just create a plain text-file with the suffix ‘js’ in its name. We’ll name our file app.js. Now open your command prompt of choice (the one used in our first example). Make sure you open it from the directory where the file is saved, that’s important.
If you’re using VS Code, you can use its built-in command prompt, just right-click in your Explorer-view and call “Open in Code” (on Windows) or drag-and-drop the directory containing the file on the VS Code-Icon in your Dock (macOS). Then you can open its terminal as described here.
When the terminal is ready, just type in the following command:
As you see, a few things have happened:
- Node started directly, with no user input available
- Node ran your whole file from top to bottom until it reach its end
- Node itself terminated, as the file’s end also marked the end of its process
Alrighty, let’s move one!
NPM, the Node Package Manager
As you’ve seen, it’s not that hard to manage your own code. The app can be stored in a file, changes you apply just stay. But what if you would want to use someone else’s code, say a cryptographic or image-manipulation library? You somehow have to put that code next to your own, make it usable for your application and keep everything manageable.
A naive approach would be to just download external code directly from the source, e.g. Github, and copy the library, file by file, into your own project. But that leads to a few problems:
- How do you best update this external code? Copying by hand is not the best solution.
- How do you keep track of all the code that’s external?
- What if this external code itself relies on libraries, which aren’t installed in your project?
All these challenges are tackled by NPM, a package manager for Node.js. A package manager’s job basically is to give you a robust solution on how to add, keep track of as well as remove external code, also known as dependencies. Here are some examples of NPM in action:
npm install serve-static npm remove serve-static
Naturally, this manager needs a few special files itself to keep track of all the dependencies in your project. That’s why applications using NPM have at least two files: package.json as well as package-lock.json. You can call the following command to quickly create a new NPM package:
npm init -y
The package.json gives you insight into your currently used dependencies in the project. package-lock.json is a special file that stores some metadata about mutations regarding your package.json-file or the node_modules-directory and can be ignored for now.
I think I’ll wrap up my description of the very core concept of NPM, what it does and what files/directories it automatically generates. Further information is linked at the article’s end.
Arc to web dev
Nice, you now know the fundamentals of Node.js and NPM. But why on earth is all this stuff even necessary to learn if you just want to start creating your own modern website?
As we’ve just seen, NPM allows us to download code from a vast collection of libraries (the largest in existence, to be precise). For web development, you will need a server that can host (that is, provide) your web app. There are plenty of services available where you can upload your website-project and use an existing infrastructure, including servers, to make the website available on the web.
And for local development, a server is also required to load your local files and make them available only to you, on your device, during development. Thanks to Node.js, you can just do that: making your website available locally via a so-called localhost. Node.js has the tools built in required to launch a local server, but through NPM, you application can be enriched with battle-tested components that can help you create very large services in a short amount of time.
Of course that’s just the beginning: NPM hosts so much code for building modern web apps (known as PWA, “progressive web app”) as well as complex servers. But for a first introduction, I think that explanation should be fine.
I hope I could help you get a grip with Node.js and NPM. First steps are always the hardest, but biting through the first days of development and (a lot of) learning will be rewarded with your skills expanding into the development of modern web applications, enabling you to be built whatever you want to.