• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/2/20

Manage your dependencies

No matter which IDE, OS or type of computer you use, there are certain tools you will need to know about and understand to successfully set up your local working environment. The most ubiquitous and commonly used of these tools is the Node Package Manager, or  npm .

What is  npm ?

Basically,  npm  is your JavaScript parts supplier. The Open Source community builds and maintains literally hundreds of thousands of packages for all kinds of JavaScript requirements. These include development packages for processes like:

  • linting — the process of verifying code quality

  • transpiling — converting ES6+ JavaScript, TypeScript, etc. into ES5 for maximum browser compatibility

  • bundling — grouping multiple files into one single file to minimize server requests

  • minifying — reducing the overall size of files to maximize performance

And that's just for vanilla JavaScript front-end work! You will also use  npm  extensively if you go on to learn front-end frameworks or libraries like jQuery, Angular, React, or Vue, and if you learn fullstack development with Node, Express, MongoDB, GraphQL, etc. Anywhere you use JavaScript, you will almost certainly use  npm , so it's certainly worth learning about!

You can also use  npm  (and you will in this part of the course) to install global packages on your development machine. These packages can include build tools like Grunt, Gulp, or Webpack for automating and optimizing your build process. In this course, we will be using Gulp.

Installing  npm

To install npm on your development machine, you will first need to install Node.js, the JavaScript runtime. You can download and install the latest version from the Node.js website.

Using  npm

Let's start with the code from the previous part of this course. Here is  index.html :

<html>
  <head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Chaining requests</title>
  </head>
  <body>
    <div class="container">
      <header id="page-header" class="bg-dark text-white col-sm-12">
        <h1 id="main-heading" class="text-center">Chaining requests</h1>
      </header>
      <div class="row">
        <section class="col-sm-10 offset-sm-1 text-center">
          <button type="button" id="generate-button" class="btn btn-primary btn-lg">Generate Post!</button>
        </section>
      </div>
      <div class="row">
        <article class="col-sm-10 offset-sm-1">
          <h2 id="post-title"></h2>
          <small id="post-id"></small>
          <p id="post-content"></p>
        </article>
      </div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

And  scripts.js  :

// Get DOM elements
const generateButton = document.getElementById('generate-button');
const postTitle = document.getElementById('post-title');
const postId = document.getElementById('post-id');
const postContent = document.getElementById('post-content');

/**
 * Makes an AJAX request of type 'verb' to 'url' with optional 'data' object
 * Returns a Promise which resolves or rejects with server response
 */ 
function makeRequest(verb, url, data) {
  return new Promise((resolve, reject) => {
      
    // create and open AJAX request
    let request = new XMLHttpRequest();
    request.open(verb, url);
    
    request.onreadystatechange = () => {
      // only execute code if request is ready
      if (request.readyState === 4) {
        // request is successful for codes 200 or 201  
        if (request.status === 200 || request.status === 201) {
          resolve(JSON.parse(request.response));
        } else {
          reject(JSON.parse(request.response));
        }
      }
    };
    // for POST requests, set Content-Type header and send request with 'data` object
    // otherwise, simply send request
    if (verb === 'POST') {
      request.setRequestHeader('Content-Type', 'application/json');
      request.send(JSON.stringify(data));
    } else {
      request.send();
    }
  });
}

/**
 * Sends GET requests for uid, title and content in parallel
 * Sends resulting object as POST request
 * Handles response from POST request and prints result to DOM
 */ 
async function createPost() {
  // create three request Promises (starts sending requests)
  const uidPromise = makeRequest('GET', 'https://us-central1-open-classrooms-js-for-the-web.cloudfunctions.net/widgets/generate-uid');
  const titlePromise = makeRequest('GET', 'https://us-central1-open-classrooms-js-for-the-web.cloudfunctions.net/widgets/generate-title');
  const contentPromise = makeRequest('GET', 'https://us-central1-open-classrooms-js-for-the-web.cloudfunctions.net/widgets/generate-lorem');

  // await responses from three requests and assign to three constants
  const [uidResponse, titleResponse, contentResponse] = await Promise.all([uidPromise, titlePromise, contentPromise]);

  // concatenate data from GET requests and make POST request
  const postPromise = makeRequest(
    'POST',
    'https://us-central1-open-classrooms-js-for-the-web.cloudfunctions.net/widgets/create-post-with-uid',
    {uid: uidResponse.uid, title: titleResponse.title, content: contentResponse.lorem}
  );
  
  // assign result to constant and print constant properties to DOM
  const post = await postPromise;
  postTitle.textContent = post.post.title;
  postId.textContent = post.post.id;
  postContent.textContent = post.post.content
}

// click listener for Generate Post! button
generateButton.addEventListener('click', () => {
  createPost();
});

Create both of these files in a new project directory (this will be your working directory until the end of this part of the course). Open a terminal and navigate to that project directory: we are going to initialize our project by running:

npm init

This command creates a  package.json  file which will contain your project's dependencies (both development and production) and some metadata about your project. When you run  npm init , you are given the opportunity to add this metadata; you may do so, or you can also simply hit Enter to add default values.

Now that your  package.json  file exists, you can use the  npm install  command to install packages to your project.

Installing  npm  packages

There are three main methods of installing packages with  npm  — which one you use will depend on what the package is for. Here is a brief explanation (you will use all three in this part of the course):

  • npm install -g <package>  — this command will install a package globally on your machine, and is useful mainly for CLI, or command-line interface tools

  • npm install <package> --save  — this command will install a package locally to a project, and will save it as a production dependency, necessary for your code to function in a production environment

  • npm install <package> --save-dev  — this command will also install a package locally to a project, but will save it as a development dependency, i.e. one that is no longer required once your project is pushed to production

Installing packages locally to your project creates a  node_modules  directory.  You will not need to modify any files in this directory, as it is managed by  npm .  You may also notice, as we go on, that there are many packages in  node_modules  we did not actively install — this is because  npm  automatically installs package dependencies, making life far simpler for us.

Summary

In this chapter, we saw what  npm  is, and what it does for us.  We prepared our project directory and its  package.json  file, and had a brief look at some of the different ways in which  npm  can install packages for us.

In the next chapter, we will start installing and configuring Babel, the JavaScript compiler, to help maximize our code's browser compatibility.

Example of certificate of achievement
Example of certificate of achievement