Let's go ahead and create an empty folder for our project, add the package.json file into it and install npm modules that we will need for the first chapter. You can either run the npm init command from a command line to generate a new package.json file or just create it manually and put { } inside to make it a valid JSON.
The table here shows that where in the app each module is going to be used:
npm Module | Client | Server | Build | Test |
babel babel-core babel-eslint express del eslint eslint-config-airbnb eslint-plugin-react extend gaze ncp moment react react-dom webpack | x x x x | x x x x x | x x x x x x | x x x x |
Some of the packages are going to be used only by the client-side portion of the app, some, only for the server-side code (Node.js), and some will be shared between client and server; there are also packages that will not be used by the app directly but will help with bundling and optimization, testing, and debugging.
Some small explanation about these packages:
babel/babel-core: JavaScript transpiler from new JavaScript syntaxes to JavaScript supported by the browsers chosen by youexpress: The web framework that we will use in this book for the server.del: This makes deleting files/folder easiereslint*: The JavaScript linter, works with the new js syntaxextend: They extend a JavaScript object with othersgaze: This watches for file system file changesncp: This is async recursive file copying utilitymoment: This is the time library for JavaScriptreact*: No need for much explanation herewebpack: The module bundler that we will use for our isomorphic app
To install these packages simply run:
$ npm install babel-core, bluebird, express \ moment, react, react-dom --save$ npm install babel babel-eslint babel-loader del eslint \ eslint-config-airbnb eslint-plugin-react \extend gaze ncp webpack --save-dev
Note, that the majority of the preceding modules should be installed as dev dependencies, by using the --save-dev command-line argument. The only packages that need to be installed as direct application dependencies are the ones that are supposed to be used at runtime by Node.js app (see Server column in the preceding table). It is also considered a good practice to use strict version numbers for the modules that application uses at runtime.
Now, the contents of your package.json file should look similar to this:
{
"private": true,
"dependencies": {
"bluebird": "3.5.0",
"express": "4.15.4",
"moment": "2.18.1",
"react": "16.0.0",
"react-dom": "16.0.0"
},
"devDependencies": {
"autoprefixer": "7.1.4",
"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-eslint": "8.0.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "6.23.0",
"babel-preset-node5": "12.0.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"del": "3.0.0",
"eslint": "4.7.0",
"eslint-config-airbnb": "15.1.0",
"eslint-plugin-react": "7.3.0",
"extend": "3.0.1",
"gaze": "1.1.2",
"ncp": "2.0.0",
"webpack": "3.6.0"
}
}