Npm Publishing

Elvenware Logo

TOC

Overview

The goals of this assignment are to:

The Interface

Account

Go to the NPM website and create an account.

NOTE: At some point in this process you are going to be asked for a public facing email account. They will tell you explicitly that the email they want you to enter is public facing. When they do that, you might want to go to Yahoo, Google, Microsoft or somewhere and create a trash account that you never intend to use.

OPTIONAL: Go to Gravatar and add this trash address to your account so that you can have your picture published.

Log In

Once you have the account set up and verified, go to the command line and log in:

npm login

That should be all you have to do. Sometimes it takes a long time to log in. If the login process does not go smoothly the first time, you may have to also use this command:

npm adduser

When run, adduser asks you to enter the user name and password that you just set up.

Verify that all is good by going to this site:

And by issuing this command:

npm config ls

Create Your Package

Create a folder in your repository called NpmLastName where LastName is your last name. Put a package.json file in your folder:

npm init

The name and version fields are required. For your name, use only small letters. Add something like isit322-lastname, for instance, isit322-calvert.

Put the following code in a file called index.js:

exports.getPackageDescription = function() {
  return "This is Charlie Calvert's package";
}

You should, of course, put your name rather than mine in your package.

Publish

After you have created a library that you and others can use, you will need to publish it to the NPM website so that others can use it. The first time you do this all you need to do is type:

npm publish

The second time, and each time thereafter, the process is a bit more complicated. You will need to first increment the version of your package. The version information is found in package.json, usually near the top:

"version": "1.2.3",

The version number has three parts:

Taken together, the major, minor and patch portions of your version number look like this: 1.2.3. The first number is the major number, the second the minor number and the third is a patch number:

So if the major number is 3, the minor number is 2, and patch number is 1, then the version number is:

NOTE: The versioning system described here is captured in a standard called semver. It is very widely used and is something that you, as a developer, should understand.

As a rule, we only increment a major version number when we publish a breaking change. The minor version number is usually for new features. The patch is when we publish a bug fix.

So, if we are about to publish a bug fix, we do this:

npm version patch
npm publish

By writing npm version patch, the patch portion of the version number in your package.json file is automatically incremented by one. For instance, 1.2.3 becomes 1.2.4. You can also type npm version minor to increment the minor version number, and so on.

Use Your Package

In your repository create a project:

CreateAllExpress Week03-NpmProject

Working from the root of your new project, take steps to use, to integrate, your package into your new project. The following code will install your package into node_modules, thereby making it available to your project:

npm install  --save

From routes/index.js first require your package and then create a get method that sends the output from your getPackageDescription method back to your client. On the server side, place this code near the top of routes/index.js:

const getPackageDescription  = require('isit322-calvert');

This code imports the sole function exported from your package for use in your project. Base the code that that sends the package description to the client on the server side code you created for the RestBasics assignment:

In this case you can set the route to packageInfo and put the method you create in routes/index.js:

router.get('/package-info', function(request, response) { ... })

Client side

Create a method on the client that uses fetch. That method should retrieve the value from the server and display it. You can display the string that is returned in an HTML paragraph tag.

Base your work on the App.js component from RestBasics.

Use fetch to call the /api/foo route

The main issue we are facing here is our combination of the standard "old school" express app and the modern React code. We have, however, faced this kind of problem before. In Week01, we worked through the ReactBasics assignment. In that lesson, we learned how to use WebPack and Babel to transpile ES6 code into ES5:

At some point, you are going to have to absorb how WebPack works, but for now I will give you some hints. I've placed the React component in /public/javascripts/GetPackageInfo.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './public/javascripts/GetPackageInfo.js',
    output: {path: __dirname, filename: './public/javascripts/bundle.js'},
    module: {
        loaders: [
            {
                test: /GetPackageInfo.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {presets: ['env', 'react']}
            }
        ]
    },
};

There are other steps you will need to take, but they are all outlined in the ReactBasics assignment. In quoting the code above, I just wanted to provide some help with three properties from webpack.config.js:

Turn it in

Submit your repository. I'll review the two new folders your created and test your code to be sure it works. I'm expecting to see two folders:

When I run Week03-NpmProject I'm expecting to see output from your package in the browser.