NPM Cheatsheet for React & Express

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 in the comments!

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

Table of Contents

Back End

• Express Setup

• OPTIONAL Express Packages

• Database Setup

  • PostgreSQL
  • MongoDB

Front End

• React Setup
  • Webpack
  • OPTIONAL for Webpack
  • React
  • OPTIONAL for React
• Redux Setup
• OPTIONAL for Redux

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

You can ignore this section if you're using create-react-app!

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

• redux
• react-redux
  • Note that it's necessary to also install the React-specific version of Redux, since Redux can be used with a variety of frameworks — and even Vanilla JS.

OPTIONAL for Redux

Note: Both Thunk and Saga are used to let Redux perform asynchronous actions. You can choose one or the other, although Thunk is by far the more popular option.

For Redux Thunk:

• redux-thunk

  • An in-depth introduction to thunks in Redux

For Redux Saga:

• redux-saga

  • From the official site: "You might've used redux-thunk before to handle your data fetching. Contrary to redux thunk, you don't end up in callback hell, you can test your asynchronous flows easily and your actions stay pure."

These packages may be required for Redux saga to function properly:

• regenerator-runtime
  • Standalone runtime for Regenerator-compiled generator and async functions
• core-js
  • Modular standard library for JavaScript

Did I miss anything? Let me know below!

Comments

[Gert Sønderby]

Good selection. I prefer styled-componentsover SASS, myself, a couple other things.

I will say, though, that it could be a good idea to build a toolbox lib (in the vein of react-scripts) that lets you install a single dependency and add some very simple boilerplate to get started. Kent C. Dodds made one that I've used as a basis myself.