ReactJS: Understanding package.json

package.json is used to store the metadata associated with the project as well as to store the list of dependency packages. In order to add dependency packages to your projects, you need to create package.json file. The file makes it easy for others to manage and install the packages associated with the project.

A package.json file:

  • lists the packages your project depends on
  • specifies versions of a package that your project can use.
  • makes your build reproducible, and therefore easier to share with other developers.

A package.json file may look similar to this:

Basic structure of package.json (create-react-app v2.1.0)

This file outlines all the settings for the React app.

Each of the attributes in the file has its importance in some way or the other. Where some of these are basic and clear from their names, some are not. This article is aimed at simplifying and developing a better understanding of the same.

  • name is the name of your app, which you give while executing create-react-app<name-of-application> . You can give any name of your choice to the app, the only condition being is that it should be in lowercase. It may also contain hyphens and underscores.
  • version is the current version of your app. The version field must be of the form x.x.x. By default, create-react-app initializes it as 0.1.0
  • "private": true is one of the most crucial attributes. The use is that if you set private as true in your package.json, then npm will refuse to publish it within npm ecosystem. This is a way to prevent the accidental publication of private repositories.
  • dependencies contains all the required node modules and versions required for the application in production. In the snapshot above, it contains three dependencies, which allows us to use react , react-domand react-scripts in our JavaScript. react-scripts provide a set of useful development scripts for working with React.

In the screenshot above, the react version is specified as ^16.6.3, which means that npm will install the most recent major version matching 16.x.x. In contrast if you see something like ~5.6.7 in package.json, it means that it will install the most recent minor version matching 5.6.x.

In order to add a package under dependencies, while installing, use --save.

For example, npm install <package-name> --save

This lists the package by default under dependecies with its version number.

  • devDependencies though is not there in the screenshot above, forms an important part of package.json. It lists out the packages required for development and testing.

In order to add a package to this list, while installing, use --save-dev.

For example, npm install <package-name> --save-dev

This way, it is added to the list of devDependencies.

  • scripts specifies aliases that you can use to access some of the react-scripts commands in a more efficient manner. For example, running npm start in your command line will run react-scripts start behind the scenes. Similar is true for other attributes: build, test, etc.

By default, create-react-app takes care of all the basic scripts for these operations. If not using it, you need to write of your own.

There can be other scripts as well, such as prepush, postbuild, lint, deploy, etc. Each has their own set of commands.

For example, when using gh-pages, you can write

“deploy”: “gh-pages -d build”

Here the command specifies which branch and directory to deploy.

The above set of attributes form the basic set of attributes for package.json file of a basic React application. There can be other attributes as well, for example,

  • homepage specifies the url to your project homepage. This becomes handy in react applications, when you use gh-pages, where it deploys your build directory to your homepage.
  • repository specifies the location of the code for your project. This is helpful for people who want to contribute.
  • license You should specify a license for your project so that people know how they are permitted to use it, and any restrictions you’re placing on it.

The screenshot shown above also contains two more attributes, eslintConfig and browserslist. Both of these are node modules having their own set of values. They have been recently added to create-react-app. On one hand, where browserslist provides information about browser compatibility of the app, eslintConfig takes care of the code linting. For more information, please refer browserslist and eslintConfig