# Package Management

There can be many dependencies that need to be managed to enable development with external libraries, frameworks, tools, and APIs. Since we are talking about a JavaScript project, we will use the popular Node Package Manager (NPM) to manage most of our dependencies. NPM is like NuGet or Maven, but for node modules.

If you don't have npm, you'll have to [install it (https://docs.npmjs.com/getting-started/installing-node)](https://docs.npmjs.com/getting-started/installing-node).

## Initialize NPM

To get going with npm create a directory for your project (name isn't important). Then open a command prompt at the new directory. Now initialie npm for the project, run

`npm init`

This starts a utility to help you setup your project for npm. I usually update the description, version and author info. The utility takes that data you enter and creates a package.json file. You can think of package.json like package.config for NuGet or pom.xml for Maven. This file will have a listing of all of the dependencies for the project.

## Initial Dependencies

We will be using a few dependencies that we will install with NPM. We are able to separate dependencies that are only needed for development from dependencies that are needed at runtime. This is useful when you want to distribute an application. User's of your app won't have to download your development dependencies if they don't need them.

### Runtime Dependencies

Here is a list of our initial runtime dependencies

* bootstratp - CSS styling.
* react - view engine.
* react-dom - react dom rendering module.
* react-router - routing.
* toastr - UI alerts and messaging.

To install them run

`npm install --save bootstrap react react-dom react-router toastr`

### Development Dependencies

Here is a list of our development dependencies

* browserify - bundle up JavaScript dependencies into a single file.
* browser-sync - refresh browser after changes.
* del - delete files.
* eslint - lint our JavaScript files.
* gulp - automate build and development workflow. This is like NAnt, Nake, Make and other task runners.
* gulp-concat - bundle css files.
* gulp-connect - run a webserver with LiveReload.
* gulp-eslint - run eslint in gulp tasks.
* gulp-typescript - run typescript compile in gulp tasks.
* gulp-sourcemaps - generate TypeScript sourcemaps.
* stream-combiner2 - turn a series of streams into a single stream to enable single error events.
* typescript - TypeScript dependencies.
* vinyl-source-stream - convert Browserify stream to vinyl stream used by Gulp.
* watchify - persistent browserify bundler to speed up builds.

To install them run

`npm install --save-dev browserify browser-sync del eslint gulp gulp-concat gulp-connect gulp-eslint gulp-typescript gulp-sourcemaps stream-combiner2 typescript vinyl-source-stream watchify`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://charles-bryant.gitbook.io/hello-react-and-typescript/developmentenvironment/packagemanagement.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.