To help organize all those packages we use
npm, or 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:
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:
A version number should appear, in my terminal it's
If you'd like, you can update npm by entering the following:
npm install -g npm
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
Express, are available as npm packages. These larger packages are often themselves built using a combination of other packages.
You can download all npm public software packages without any registration or logon.
npm packages are defined in files called
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.
For example if you want to install
Redux into a
React application, you need to install two packages,
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:
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.
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.
World’s most popular framework for building responsive, mobile-first sites. Very intuitive and powerful.
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.
Node.js middleware for providing a Connect/Express middleware that can be used to enable cross-origin resource sharing with various options.
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.
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.
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.
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.
Thank you for reading!