> For the complete documentation index, see [llms.txt](https://briebug.gitbook.io/angular-fundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://briebug.gitbook.io/angular-fundamentals/development-environment-setup.md).

# 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          |