# Development Environment Setup

## Node.js

Node.js is an open source server environment that runs on multiple platforms (Windows, Linux, Mac OS X, etc) and uses JavaScript on the server. It includes npm, which we need for installing packages/dependencies.

### How do I get it? (Windows Users)

<https://nodejs.org/en/download/>

Download the installer and follow the installer instructions

{% hint style="info" %}
Pro Tip: Mac/Linux users - Use NVM - Node Version Manager - <https://github.com/creationix/nvm>
{% endhint %}

### Check Node and NPM versions

```
node -v

npm -v
```

## Installing packages

```
npm install luxon
```

{% hint style="info" %}
If package.json doesn't exist you will need to create the file using:

`npm init`
{% endhint %}

### Dependencies vs DevDependencies

```
npm install jest --save-dev
```

### Global vs Local Packages

Packages are installed locally (in current folder)

```
npm i @angular/cli -g
```

Global packages are available from any folder and are installed in:

* Windows
  * C:\Users{username}\AppData\Roaming\npm
* Mac
  * /usr/local/lib/node\_modules

{% hint style="info" %}
Packages like @angular/cli need to be installed globally so we can create new projects in new folders. During the project creation process, it will also install @angular/cli locally.
{% endhint %}

### Manually Adding dependencies

You can edit the package.json directly and add dependencies to the file. To install all the dependencies in package.json at once, run: `npm install`

### Semantic Version

NPM uses semantic versioning to indicate major, minor, and patch releases

```
{
    "@angular/core": "^8.1.2",
}
```

* Exact Version
  * 8.1.2
* Latest Patch
  * 8.1
  * 8.1.x
  * \~8.1.2
* Latest Minor
  * 8
  * 8.x
  * ^8.1.2
* Latest Major
  * \*

### Updating and removing packages

* Remove packages: `npm uninstall @angular/core`
* Find outdated packages: `npm outdated`
* Update outdated packages: `npm update`

## Angular CLI

* Command line interface for creating new Angular projects
* Can generate Angular code for components, services, directives, modules, etc.
* Standardizes build and deploy
* Sets up unit and E2E testing
* Makes new project setup a breeze

### Creating new projects

```
ng new my-project
```

{% hint style="info" %}
Pro Tip: Use `ng init my-project` to create a new project in the existing folder
{% endhint %}

Optional Flags&#x20;

* `--createApplication false` set to true by default, creates a new initial app in the `src` directory. When set to false, creates an empty workspace with no initial app. Ideal for App/Lib workspaces
* `--dry-run` shows an output of what would be created
* `--minimal` skips creating tests
* `--prefix prefix` the prefix automatically added to generated component selectors (default is "app-")
* `--routing` adds routing to the project
* `--skip-install` skips the npm install process
* `--skip-git false` sets project up for git and includes .gitignore file
* `--verbose` generates project with verbose output

{% hint style="info" %}
As of @angular/cli v7, `ng new` includes cli prompts for including routing and choosing css or a preprocessor
{% endhint %}

<https://angular.io/cli>

### Dev Web Server

The Angular CLI has a build in dev server that will serve your application.

* Watches for changes and rebuilds your application
* Refreshes browser with new changes
* Can proxy requests to external APIs
* Use `ng serve` to build and serve your application
* Use `ng serve --ssl` to enable SSL
* Use `ng serve --live-reload false` to disable live reload

{% hint style="info" %}
Pro Tip: Create a proxy.conf.json to proxy calls to external APIs and avoid the headache of CORS or proxy setups.
{% endhint %}

### Proxy Setup

{% code title="proxy.conf.json" %}

```javascript
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}
```

{% endcode %}

{% code title="angular.json" %}

```javascript
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
```

{% endcode %}

## Code Editors

| ***VS Code*** | *Free*        |
| ------------- | ------------- |
| WebStorm      | Subscription  |
| Atom          | Free          |
| Sublime       | One time cost |
| VIM           | Free          |


---

# 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://briebug.gitbook.io/angular-fundamentals/development-environment-setup.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.