Introduction
JavaScript has been around for many years now. There are web developers all over the world writing JavaScript code. That's a lot of code and sometimes a lot of duplicate code.
For these situations, we have JavaScript packages. A package is basically a file or set of files full of existing, reusable code. Files are designed to be shared, allowing many web developers to use the same code in their own projects.
To help organize all those packages we use npm, or Node Package Manager.
About npm
npm, Inc. is a company founded in 2014, and was acquired by GitHub in 2020. It's a critical part of the JavaScript community and helps support one of the largest developer ecosystems in the world. Basically npm is the package manager for Node.js.
Setting Up Node Package Manager
Before we continue, let's make sure your environment is all set to work with npm.
npm is automatically installed along with Node.js. To confirm you have node installed, enter the following into your command line:
node -v
If a version appears, you have Node.js. If, by chance, you do not have Node.js installed, you can use the Node Version Manager to install Node.js and keep it up to date.
You can also double check npm by running the following:
npm -v
A version number should appear, in my terminal it's
6.14.8
If you'd like, you can update npm by entering the following:
npm install -g npm
But what is npm exactly?
NPM Introduction
As mentioned, npm is a package manager for JavaScript. This means that npm works with your JavaScript project directories via the command line, allowing you to install packages of preexisting code.
What sort of code? Well, all kinds! Some packages are quite small, like isNumber, a package that has one function: to check if a value is a number. Some packages are much more complicated. Huge libraries and frameworks, including React and Express, are available as npm packages. These larger packages are often themselves built using a combination of other packages.
Using npm is Free
You can download all npm public software packages without any registration or logon.
A Little more on package.json
All npm packages are defined in files called package.json.
The package.json file is a key part of sharing JS code repositories on sites like GitHub. Instead of having to include all the dependencies' code with every project, we just include a small file, listing out what npm needs to get for the project.
The file also typically includes information about the project, such as the name, version, author and license.
The package.json file is written in JSON, so like an object in JavaScript, it is always wrapped in curly braces, and includes keys and values. A basic example:
For example if you want to install Redux into a React application, you need to install two packages, redux and react-redux by running npm install redux && npm install react-redux.
Those are some of my favorite NPM packages i've recently used sorted into categories, for easier navigation:
💻 Frontend frameworks
React is a JavaScript library for creating user interfaces.
React uses a virtual DOM to manage sections of a page as individual components, allowing you to refresh a component without refreshing the entire page. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.
Redux
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
Vue was built by combining the best approaches from React and others, focusing on features that made writing Web apps faster, easier, and more pleasant. Great documentation. Often used with Vue-router and Vuex.
🎨 Styling frameworks
World’s most popular framework for building responsive, mobile-first sites. Very intuitive and powerful.
font-awesome
The iconic font and CSS framework
Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites.
CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and running in styling components in a functional and reusable way.
🔗 CORS and requests
Node.js middleware for providing a Connect/Express middleware that can be used to enable cross-origin resource sharing with various options.
Axios
A promise-based HTTP client for the browser and Node.js. It's easy to set-up, intuitive, and simplifies a lot of stuff compared to JS built-in Fetch API.
Body parsing middleware, that extracts the entire body portion of an incoming request stream and exposes it on req.body as something easier to interface with.
🧩 API services
A Node.js web service framework optimized for building semantically correct RESTful web services ready for production use at scale. Restify optimizes for introspection and performance.
A query language for APIs and a runtime for fulfilling those queries with your existing data. Provides a complete description of the data in your API, gives clients the power to ask for exactly what they need.
🔓 Auth tools
Passport's purpose is to authenticate requests through an extensible set of plugins known as strategies. You provide Passport a request to authenticate, and Passport provides hooks for controlling what occurs when authentication succeeds or fails.
A library to help you hash passwords. Bcrypt is a password-hashing function designed by Niels Provos and David Mazières, based on the Blowfish cipher and presented at USENIX in 1999.
📃 Static site generators
A modern site generator that creates fast, high-quality, dynamic React apps, from blogs to e-commerce sites to user dashboards. Great plugin ecosystem and templates.
NextJS first and foremost supports server rendering as well as statically generated content. You can also define serverless functions as API endpoints.
To connect please check my Github, LinkedIn or Twitter.
Thank you for reading!
Top comments (2)
Hi Ivana, external links in your article refer to your article.
Thank you @honza, just fix it!