Today 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!
Node.js
If you’re reading this, you have probably already downloaded Node.js + NPM and started with tipping your toe into the waters of Javascript. Yet the first steps might already seem scary: “I just want to write a little program in Javascript, why do I need all the other stuff?”. That’s understandable, but really not a big deal at all.
Let’s start at the beginning: You can simply create a Javascript-file everywhere on your computer, indicated by the ‘.js’-suffix. This file can be filled with code any way you want, but then there’s one thing missing: how do you actually run your program? That’s where Node.js comes into play.
Node.js is a runtime environment, explicitly for Javascript. As the description implies, Node can run your Javascript code in a specific environment Node itself provides. The process is always the same: you first start Node.js, and when Node is spun up (which means it has finished starting) you can provide it your Javascript code.
There are two ways your Javascript can be provided to Node as input:
- Directly to the running Node-process, line by line, no files included
- By telling Node which Javascript-file to load, without any line-by-line input
node
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).
Now that Node is up and running, we can define our Javascript-app line by line. Each input is processed and stored in memory. Here a little example.
(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.
node app.js
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
And for a basic introduction to Node.js, that’s it! Once you’ve downloaded Node and first experienced the usage of the command prompt for launching your very own Javascript app, either line-by-line or from a file, you’re officially a Javascript dev! Welcome to the club!
I will now walk you through the core concept of NPM. After the next chapter, we’ll quickly look at the connection between Node.js, NPM and the web development. If you want to learn more about Node.js, you can check out our stories about Javascript, toolchains and everything coding-related here. I’ve also linked some useful resources at the end of this article for even more stuff to learn.
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
Note: as we’ve seen in the first part of this article, NPM is not needed to use Node.js or Javascript. Its focus is managing your dependencies - no more, no less. Through NPM you can download code that’s published at npmjs.com. All these external modules are stored in your project in a special directory called node_modules. You’ll practically never have to alter this directory, as it’s fully managed by NPM.
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.
