NPM Cheatsheet for React & Node

Note: the original version of this post was published on Dev.

Whenever I start a new project, I often find myself copying my setup boilerplate from past projects. I'm sure I'm not the only one.

That's why I put together a quick cheatsheet that includes some of the most essential NPM packages to install for apps built with React and Express. Although this setup is mainly geared towards CRUD apps, you can also reference individual sections (such as the React and Redux parts).

Your preferred setup may differ from mine, so if you feel I've neglected some of your favorite NPM packages (or if you disagree with some of my choices), feel free to let me know on Twitter!

Unless otherwise noted, each package can be installed as such:

// If you're using NPM
npm install NAME

// If you're using Yarn
yarn add NAME

Table of Contents

Back End

Front End

Back End

Express Setup

  • express
  • cookie-parser
    • Parses cookie header and populates req.cookies with an object keyed by the cookie names.
  • nodemon (dev dependency)
    • Restarts server after any changes are made, unlike the standard node command, which does not respond to changes made after running.
    • Use in your start script like so: nodemon server.js
    • Not strictly necessary, but will greatly improve your efficiency as a developer.
  • bcrypt
    • Popular authentication tool for hashing and verifying passwords (and other information)
    • Feel free to use other authentication solutions like Passport.js
  • Note: body-parser is deprecated. The json and url-encoded functionality can be performed with native Express methods:
    app.use(express.urlencoded({ extended: true }));
    app.use(express.json());

OPTIONAL Express Packages

  • concurrently
    • Used to run multiple npm commands simultaneously.
    • Not necessary in UNIX-like environment (e.g. Macs), which can chain commands with & (run all commands in parallel) or && (waits for the previous command to finish before running)
  • dotenv
    • Loads environmental variables from a .env file into process.env
    • Useful for keeping private info (e.g. API keys) out of public repos
    • Usage example:
      • Store an API key as a variable in .env.
      • Add .env to your .gitignore file so the file isn’t added to your repo.
      • With dotenv installed, you can access that API key variable by referencing process.env, e.g. process.env.VARIABLE

Database Setup

PostgreSQL

  • node-postgres
    • Note: install with npm install pg!
    • Lets node.js (and Express) interact with a PostgreSQL database

MongoDB

  • mongoose
    • Robust wrapper for MongoDB that handles validation, casting, and business logic boilerplate.
    • One of Mongoose's central features is its ability to create schemas for MongoDB collections.

Front End

React Setup

If you're using create-react-app, you can ignore everything in this section besides node-sass!

Webpack

Install all webpack-related packages as dev dependencies.

  • webpack
  • webpack-cli
    • Webpack's official CLI (command line interface), providing access to many convenient commands, such as creating a new webpack configuration or migrating a project from one version to another.
  • webpack-dev-server
    • Provides a development server for webpack, complete with live reloading
    • Recommended NPM script: "start:dev": "webpack-dev-server"
  • @babel/core
    • Babel compiler core
  • @babel/preset-env
    • A smart preset that lets you use the lastest JavaScript features without worrying about which syntax transforms and browser polyfills your target environments require.
  • @babel/preset-react
    • A Babel preset for all React plugins
  • babel-loader
    • Lets you transpile files using Babel & Webpack
  • css-loader
    • Interprets @import and url() in CSS files
  • style-loader
    • Injects CSS into the DOM

OPTIONAL for Webpack

  • sass-loader
    • Loads Sass/SCSS files and compiles them to CSS.
    • Only necessary if you're using Sass... which you should probably use.

React

  • react
  • react-dom
    • Serves as the entry point to the DOM and service renderers for React. Should be paired with the generic react package above.

OPTIONAL for React

  • react-router-dom
    • Performs client-side routing without the need to contact the server.
    • Lets you use React Router in a web setting (react-router-native is also available for React Native).
    • Read more on the official site.
  • node-sass
    • Natively and automatically compiles .scss files to CSS.
    • Lets you directly use .scss files in React, which is awesome.

Redux Setup

  • react-redux
  • @reduxjs/toolkit
    • This will set you up with Redux Toolkit, a modern version of React Redux that eliminates a lot of the boilerplate that developers associate with Redux. I highly recommend it.

Now get building!