Installing Node

1. Install NVM (Node Version Manager). This will allow you to easily swap between Node versions. See the NVM GitHub page.

   curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
       

2. You can install the latest version of Node by running nvm install node.

   nvm install node
       

3. For non-personal projects, using the LTS version of Node is recommended. You can install the latest version via nvm install --lts.

   nvm install --lts
       

4. Add bash autocompletion to .bashrc or .bash_profile.

   [[ -r $NVM_DIR/bash_completion ]] && . $NVM_DIR/bash_completion
       

Project Management

Starting a new project from scratch

1. Running npm init in an existing folder starts an interactive prompt to create the config file package.json.

   npm init
       

   or

   yarn init
       

2. I recommend adding a browserslist field to your package.json. This is used by a few different libraries so you are targetting a certain browser version across all your dependencies. See Browserslist GitHub page for more information and options.

   {
     "browserslist": [
       "> 1%",
       "last 2 versions"
     ]
   }
       

3. Add a .gitignore file. You’ll want to ignore node_modules at the very least! Example Node .gitignore

   # Logs
   *.log
   npm-debug.log*
   yarn-debug.log*
   yarn-error.log*
   
   # Dependencies
   node_modules/
       

4. Add an .nvmrc file, with the version of Node you are using (you can find out by running node -v).

   6.10
       

5. Set up eslint. Eslint can be used to enforce code conventions across projects, but for personal projects it works best for catching errors or antipatterns.

   npm install eslint --save-dev
       

   or

   yarn add eslint --dev
       

   • You can initialise an eslint configuration file (generally .eslintrc) by running the following:

     ./node_modules/.bin/eslint --init
             

   • Some useful plugins:
     • eslint-plugin-compat

       {
         "env": {
           "browser": true
         },
         "plugins": ["compat"],
         "rules": {
           "compat/compat": 2
         }
       }
                   

Starting from an existing project

1. Ensure you have the correct version of Node. If the project has an .nvmrc, you can run nvm use to either use or install the correct version of Node for the project. Note that engine version is not a huge deal for client-side JavaScript, but many development tools rely on or expect a specific version of Node.

   nvm use
       

   • I have a script added to my .bash_profile that looks for a .nvmrc on launch.

     if [ -e ".nvmrc" ]; then
       nvm use;
     else
       nvm use default;
     fi
             

2. After cloning the repository (or fetching after some changes), you can get the required dependencies via npm install.

   npm install
       

   or

   yarn install
       

3. Per repo instructions will vary, but generally, running npm start within a repo should do something useful! You can find particular scripts via a package.json’s scripts entry, and run them by npm run foo.

Creating and running scripts

• Most Node projects provide a start command. This is (or should be) the entry point to a Node application.
• If there is no start entry in your package.json, npm will run node server.js (if there is a file called server.js in the root of your directory).
• To add the start script to your application, add a start entry to the field scripts in your package.json.

  "scripts": {
    "start": "node index.js"
  }
      

• To run the start script, simply type npm start.
• You can use the above steps for the following:
  • npm start
  • npm test
  • npm stop
  • npm restart
    1. npm stop
    2. npm restart
    3. npm start
• The above scripts also support running scripts before and after the base script by using the prefixes pre and post.
  • npm start
    1. npm prestart
    2. npm start
    3. npm poststart
  • npm test
    1. npm pretest
    2. npm test
    3. npm posttest
  • npm stop
    1. npm prestop
    2. npm stop
    3. npm poststop
  • npm restart
    1. npm prerestart
    2. npm prestop
    3. npm stop
    4. npm poststop
    5. npm restart
    6. npm prestart
    7. npm start
    8. npm poststart
    9. npm postrestart
• You can add and run any script you like. Note that the syntax changes slightly. If you add a script called foo, to execute it, you run it by executing npm run foo.
• When creating npm scripts, a useful thing to remember is that npm run adds node_modules/.bin to the PATH.

Webpack

yarn add webpack webpack-dev-server --dev

// webpack.config.js

module.exports = {
  entry: "./src/app.js",
    output: {
      filename: "dist/bundle.js"
    }
  }
}

"scripts": {
  "start": "webpack-dev-server --open"
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

Babel

yarn add babel-loader babel-core babel-preset-env --dev

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: "/src/",
        use: {
          loader: "babel-loader",
          options: {
            presets: [ "env" ]
          }
        }
      }
    ]
  }
  // ...
}