Skip to main content

package.json

As in any NodeJS application, the dependencies are managed by the package.json file in the root of your project.

After an initial setup, this file contains the a list of the installed packages as well as some runtime specifications:

{
  "name": "new-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

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.

  • 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-dom and react-scripts in our JavaScript. react-scripts provide a set of useful development scripts for working with React.

In the listing above the react version is specified as ^18.1.0, which means that npm will install the most recent major version matching 18.x.x. In contrast if you see something like ~5.14.1 in package.json, it means that it will install the most recent minor version matching 5.14.x.

Adding libraries/plugins/packages​

You can add 3rd party libraries, plugins and packages (which are registered on npmjs.com) to your React application by issuing the following command(s):

npm install <package-name> [--save, --save-dev, --global]
  • --save adds the package to package.json (it's the default so it can be omitted)
  • --save-dev adds the package ONLY to your development dependencies (like test or debug tools)
  • --global will install the package GLOBALLY on your computer, so it can be access everywhere (not recommended).

Scripts​

The scripts-part in package.json contains the commands we can issue to control our application. These commands can be run with either yarn or npm, although the syntax is fairly the same, npm requires you add the run subcommand to it:

npm run [COMMAND]
# or 
yarn [COMMAND]

Let's take a look at the commands:

  • start: Fires up a development (web)server listening on port 3000 (default). The server auto-refreshes the page when a change is detected.
  • build: Creates a production ready compiled (transpiled) site in the ./build folder.
  • test: Runs test (jest) script (if present)
  • eject: Decouples all packages React is using under the hood (in the ./node_modules directory) and applies them to package.json: one way operation!!

You will be using both the start and build frequently. I have never found any use for the eject command.