Initializing package.json and installing npm modules

We will begin by using npm to install all the required modules. It is a best practice to add a package.json file in every project folder to maintain, document, and share the npm modules being used in the MERN application. The package.json file will contain meta information about the application, as well as list the module dependencies.

Perform the steps outlined in the following to generate a package.json file, modify it, and use it to install the npm modules:

• npm init: From the command line, enter your project folder and run npm init. You will be asked a series of questions and then a package.json file will be auto-generated with your answers.
• dependencies: Open the package.json in your editor and modify the JSON object to add the key modules and react-hot-loader as regular dependencies.

The file path mentioned before a code block indicates the location of the code in the project directory. This convention has been maintained throughout the book to provide better context and guidance as you follow along with the code.

 mern-simplesetup/package.json:

"dependencies": {
   "express": "^4.16.3",
    "mongodb": "^3.0.7",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-hot-loader": "^4.1.2"
}

• devDependencies: Modify package.json further to add the following npm modules required during development as devDependencies.

 mern-simplesetup/package.json:

"devDependencies": {
    "babel-core": "^6.26.2",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "nodemon": "^1.17.3",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-middleware": "^3.1.2",
    "webpack-hot-middleware": "^2.22.1",
    "webpack-node-externals": "^1.7.2"
}

• npm install: Save package.json and from the command line, run npm install to fetch and add all these modules to your project.