01-node-yarn-package-json.md

01 - Node, Yarn, and package.json

Code for this chapter available here.

In this section we will set up Node, Yarn, a basic package.json file, and try a package.

Node

💡 Node.js is a JavaScript runtime environment. It is mostly used for Back-End development, but also for general scripting. In the context of Front-End development, it can be used to perform a whole bunch of tasks like linting, testing, and assembling files.

We will use Node for basically everything in this tutorial, so you're going to need it. Head to the download page for macOS or Windows binaries, or the package manager installations page for Linux distributions.

For instance, on Ubuntu / Debian, you would run the following commands to install Node:

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

You want any version of Node > 6.5.0.

Node Version Management Tools

If you need the flexibility to use multiple versions of Node, check out NVM or tj/n.

NPM

NPM is the default package manager for Node. It is automatically installed alongside with Node. Package managers are used to install and manage packages (modules of code that you or someone else wrote). We are going to use a lot of packages in this tutorial, but we'll use Yarn, another package manager.

Yarn

💡 Yarn is a Node.js package manager which is much faster than NPM, has offline support, and fetches dependencies more predictably.

Since it came out in October 2016, it received a very quick adoption and may soon become the package manager of choice of the JavaScript community. If you want to stick to NPM you can simply replace all yarn add and yarn add --dev commands of this tutorial by npm install --save and npm install --save-dev.

Install Yarn by following the instructions for your OS. I would recommend using the Installation Script from the Alternatives tab if you are on macOS or Unix, to avoid relying on other package managers:

curl -o- -L https://yarnpkg.com/install.sh | bash

package.json

💡 package.json is the file used to describe and configure your JavaScript project. It contains general information (your project name, version, contributors, license, etc), configuration options for tools you use, and even a section to run tasks.

• Create a new folder to work in, and cd in it.
• Run yarn init and answer the questions (yarn init -y to skip all questions), to generate a package.json file automatically.

Here is the basic package.json I'll use in this tutorial:

{
  "name": "your-project",
  "version": "1.0.0",
  "license": "MIT"
}

Hello World

• Create an index.js file containing console.log('Hello world')

🏁 Run node . in this folder (index.js is the default file Node looks for in a folder). It should print "Hello world".

Note: See that 🏁 racing flag emoji? I will use it every time you reach a checkpoint. We are sometimes going to make a lot of changes in a row, and your code may not work until you reach the next checkpoint.

start script

Running node . to execute our program is a bit too low-level. We are going to use an NPM/Yarn script to trigger the execution of that code instead. That will give us a nice abstraction to be able to always use yarn start, even when our program gets more complicated.

• In package.json, add a scripts object like so:

{
  "name": "your-project",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node ."
  }
}

start is the name we give to the task that will run our program. We are going to create a lot of different tasks in this scripts object throughout this tutorial. start is typically the name given to the default task of an application. Some other standard task names are stop and test.

package.json must be a valid JSON file, which means that you cannot have trailing commas. So be careful when editing manually your package.json file.

🏁 Run yarn start. It should print Hello world.

Git and .gitignore

• Initialize a Git repository with git init

• Create a .gitignore file and add the following to it:

.DS_Store
/*.log

.DS_Store files are auto-generated macOS files that you should never have in your repository.

npm-debug.log and yarn-error.log are files that are created when your package manager encounters an error, we don't want them versioned in our repository.

Installing and using a package

In this section we will install and use a package. A "package" is simply a piece of code that someone else wrote, and that you can use in your own code. It can be anything. Here, we're going to try a package that helps you manipulate colors for instance.

• Install the community-made package called color by running yarn add color

Open package.json to see how Yarn automatically added color in dependencies.

A node_modules folder has been created to store the package.

• Add node_modules/ to your .gitignore

You will also notice that a yarn.lock file got generated by Yarn. You should commit this file to your repository, as it will ensure that everyone in your team uses the same version of your packages. If you're sticking to NPM instead of Yarn, the equivalent of this file is the shrinkwrap.

• Write the following to your index.js file:

const color = require('color')

const redHexa = color({ r: 255, g: 0, b: 0 }).hex()

console.log(redHexa)

🏁 Run yarn start. It should print #FF0000.

Congratulations, you installed and used a package!

color is just used in this section to teach you how to use a simple package. We won't need it anymore, so you can uninstall it:

• Run yarn remove color

Two kinds of dependencies

There are two kinds of package dependencies, "dependencies" and "devDependencies":

Dependencies are libraries you need for your application to function (React, Redux, Lodash, jQuery, etc). You install them with yarn add [package].

Dev Dependencies are libraries used during development or to build your application (Webpack, SASS, linters, testing frameworks, etc). You install those with yarn add --dev [package].

Next section: 02 - Babel, ES6, ESLint, Flow, Jest, Husky

Back to the table of contents.