Creating a new project with NPM

Phil Parsons

Tagged: ,

In this article we are going to run through how to get a new project set up with NPM. You should have Node.js with NPM installed on your system before starting this tutorial so check out the download and installation instructions on the Node.js website if needed. NPM (Node Package Manager) is the package manager for Node.js and comes bundled with some handy command line tools which we will be utilising to build our project.

What’s a package manager?

NPM is the package manager for Node.js applications, but what is a package manager? Package managers allow us to build and deploy code in self contained packages that can be combined to build larger pieces of code which we eventually call software. Developing in packages this way allows us to create a range of useful bits of code that we can share across projects and bring together to build many different types of application. Examples of packages will be seen later in this article as we start to install some of the packages we require to build our application.

Step 1: Creating our project directory

We need to create a new directory on the file system to store the application. We will be using the command line interface (CLI) to run NPM commands throughout this series so it makes sense to learn how to open and use a terminal window now. You can learn more about how to open a terminal window on Mac  or a command prompt on Windows and once you have a terminal window open will need to create a new directory for your project in a suitable location on your computer. On both Mac and Windows (or Linux) it makes sense to create a new folder named react-isomorphic in your home directory using the two commands shown below. Here’s how you do that:

On windows this may look like

We then want to enter this new directory to start on our project using the command

Feel free to put the project elsewhere on your computer if you have the confidence and knowledge to do so.

Step 2: Initializing our NPM package

The next step is to initialize the project using NPM. The NPM command line tools can handle this for us asking just a few questions along the way. Let’s start by typing the command

This will start up a utility program to help us create the project configuration. The configuration is stored in JSON format in a file named package.json within our project directory. Follow the steps as they appear pressing enter to accept the default option provided. Feel free at this point to enter your name as the author and add a description for the project but take note that if you don’t see the name of the package suggested as react-isomorphic you may have neglected to complete the last part of step 1 to enter into the project directory.

Once complete this gives us a our default package.json file to which we will be making many changes as we progress through the development of our application.

Step 3: Installing packages

We will be using Webpack to build the code in our project—Webpack is the subject of the next article in this series. Webpack is a tool that we will be using on the development of more than just one package so we need to install it in a way where it is available as a program we can run from any directory on our computer. To do this using NPM we specify the -g or –global flag when installing a package. Let’s start then by installing webpack.

After running this command you will see the screen fill with progress updates on the installation of the packages Webpack itself depends upon before it eventually finishes with a success message. This now means we can start to use the Webpack commands so let’s test that.

Running the above command should now show a list of commands available to us in the Webpack command line tools. Don’t worry about understanding any of these commands just yet as we’ll explore each one that we need as we come to it.

Next we need to install some packages that will be local to our current project. This means that the package we install will not be available outside of our react-isomorphic directory. We want to keep track of the packages we depend upon by adding entries of the package name and version in the package.json configuration file. The NPM command line tool gives us options to save these entries automatically as we install new packages. Some packages are saved as dependencies of the development process and others are saved as dependencies of the main package. Let’s install some of these dependencies now.

This command installs all of the dependences required to use the Babel loader for Webpack. We’ll learn more about Webpack and Babel when we start to use them to write our JavaScript code. Note here that we pass the –save-dev option when running the npm install command to keep track of the installed package as one of our development dependencies. What this means is that the babel-loader package is a tool that we need to have installed as we develop our application.

Next we install a dependency of our application which will be the Express application server framework. Let’s install and save Express.

This time we pass the –save option to the npm install command. This is similar to the –save-dev option but instead saves the package name and version under a different section in our package.json file. Your package.json dependency sections should now look like the below although you may see newer versions of the packages installed which is fine.

When we installed these packages NPM created a directory inside of our project called node_modules. This is where all of the packages we install (both with –save and –save-dev) are stored. When we install packages like Webpack with the -g option those packages are saved into a shared directory named node_modules that lives in a central location on your computer. You can read more about how node modules are installed and resolved in the NPM documentation.

The package.json file serves many purposes. In this article we have seen how the package.json file is used to store information about our project and the packages we depend upon. We can now share our package.json with our code so that the required packages can be installed on a different computer which is a key concept in developing with packages. We’ll be building upon what we have started here in subsequent articles in this series where we will add script commands for automation, options for specific tooling and to further manage our dependencies..

Bonus section

Now is a good time to start managing the project code with a version control system like Git. We won’t be covering how to use Git in this series but it would be advisable to save your progress after each article by storing the code on a remote repository such as Github or Bitbucket. If this seems like a stretch too far at this stage of your development then it may be advised to create a backup copy of the project directory before starting work on the each new article.

This tutorial on the Github website may help you figure out how to get started with Git on Github.

Like this article? You can sign up for free to get notified about new articles in this series.

It's only fair to share...Tweet about this on Twitter
Share on Facebook
Buffer this page
Share on LinkedIn
Pin on Pinterest

/ 10 Articles

Phil Parsons

Leave a Comment

Your email address will never be published or shared and required fields are marked with an asterisk (*).

This site uses Akismet to reduce spam. Learn how your comment data is processed.