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
- 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.
- Restarts server after any changes are made, unlike the standard
-
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
andurl-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
- Note: install with
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
andurl()
in CSS files
- Interprets
-
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.
- Serves as the entry point to the DOM and service renderers for React. Should be paired with the generic
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:
For 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."
- From the official site: "You might've used
These packages may be required for Redux saga to function properly:
-
regenerator-runtime
- Standalone runtime for Regenerator-compiled generator and
async
functions
- Standalone runtime for Regenerator-compiled generator and
-
core-js
- Modular standard library for JavaScript
Did I miss anything? Let me know below!
Top comments (1)
Good selection. I prefer
styled-components
over 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.