# Front-End setup and compilation

In our ambition to stay up to date and bring to our product high quality standards, Front-End [Architecture](https://app.gitbook.com/s/-MEOm98BbzqckTUoLpXN/general/frontend/documentation/winforms-angular-components/architecture.md) was made using Angular framework together with Kendo UI Angular, you will see a clean, fast and native code easy to build and setup.

On this guide we will learn how to setup front-end environment, there are a couple prerequisites that we need to follow before start.

## Kendo ui Angular

Kendo UI for Angular has high-performance Angular UI components without any jQuery dependencies that we implement and customize on our Front-End, this is installed as discrete, scoped npm packages on `package.json`.

```javascript
"dependencies": {
    "@progress/kendo-angular-buttons":  "8.0.0",
    "@progress/kendo-angular-common":  "3.1.0",
    "@progress/kendo-angular-dateinputs":  "7.0.1",
    "@progress/kendo-angular-dialog":  "7.1.2",
    "@progress/kendo-angular-dropdowns":  "7.0.2",
    "@progress/kendo-angular-editor":  "4.2.0",
    "@progress/kendo-angular-excel-export":  "5.0.1",
    "@progress/kendo-angular-gauges":  "5.0.0",
    "@progress/kendo-angular-grid":  "7.1.0",
    "@progress/kendo-angular-inputs":  "9.0.3",
    "@progress/kendo-angular-intl":  "4.0.1",
    "@progress/kendo-angular-l10n":  "4.0.0",
    "@progress/kendo-angular-label":  "4.0.0",
    "@progress/kendo-angular-layout":  "7.1.0",
    "@progress/kendo-angular-menu":  "4.0.0",
    "@progress/kendo-angular-pdf-export":  "4.0.0",
    "@progress/kendo-angular-popup":  "5.0.0",
    "@progress/kendo-angular-progressbar":  "3.0.0",
    "@progress/kendo-angular-toolbar":  "6.0.2",
    "@progress/kendo-angular-tooltip":  "4.0.1",
    "@progress/kendo-angular-treeview":  "7.0.2",
},
```

For new Kendo components is highly recommended to check the proper package installation at [Kendo Webpage](https://www.telerik.com/kendo-angular-ui/components/) and follow their instructions.

## Angular Framework prerequisites

As we previously mention, Angular is the backbone of our front-end code and before proceeding we need:

* Node.js
* Node Package Manager (NPM)

Install angular CLI (Command Line Interface) using `yarn` or `npm` install.

```bash
npm install @angular/cli -g
```

And finally execute :

```bash
npm install
```

or

```bash
yarn install
```

Here is the complete [quick start](https://angular.io/guide/quickstart) guide by Angular.

## Yarn or Npm

Yarn is a package manager as same as NPM, Its purpose is to solve a handful of problems that are faced with NPM, the main reason to use Yarn is because installing packages is even faster however is not consistent than NPM. Yarn is only a CLI client that fetches modules from the NPM registry.

In order to use yarn you must install it globals.

```bash
npm install yarn -g
```

[Here](https://yarnpkg.com/en/docs/usage) you can find more yarn useful commands.

Note: We recommend the NPM due the newest versions are faster as Yarn but with high consistency to avoid vulnerabilities.

## WinformsComponents Compilation

Once everything is installed use npm command to build project

```bash
\\ Compilation and lint process, equivalent to ng build && ng build 

npm run build
```

## Samples Compilation

Once everything is installed you can compile samples using commands like:

```bash
\\ Default Angular configuration (Debug mode)

ng build 

\\ Production mode compilation, equivalent to ng build -c production 

npm run build

\\ Debug mode compilation (Allow access to .ts files Developer Tools),
\\ equivalent to ng build -c debug

npm run debug
```

***Differences with and without -c production***

There are differences when the applications is builded with `-c production` parameter. The production build produces an efficient deployment application, the bundles size decrease producing an improve in performance loading the app, the components code is minified, the css is minified and packaged, better security reducing possibilities of client-site HTML and injection attacks, the app is fewer asynchronous requests and faster rendering.

* `ng serve` serves an Angular project via a development server and build modules,`-o` flag opens a default browser on the specified port.

  ```bash
  ng serve -o
  ```

Setup and compile process is complete, you will be able to execute testing commands like:

* `npm test` to  running unit tests over the WinformsComponents repository path.
* `npm run cy:open` to running Component Integration Tests (CIT) over Samples application using Cypress with UI deployment.
* `npm run cy:test` to running (CIT) without UI and only displaying console information.


---

# 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://docs.gapvelocity.ai/webmap/general/frontend/documentation/winforms-angular-components/setup/front-end-setup-and-compilation.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.