# User Interface

### Angular

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.Angular has gained huge popularity in recent years, and with good reason.

### Advantages of Angular

Angular’s preconfigured environment not only helps with development, but also facilitates testing. We won’t need to use any third-party libraries to create basic functionality for your app. All you need is the official library, which is provided by the Angular team. **This means that you can expect better security and higher code quality.**

Its ecosystem is vast, with tons of ready-made components that make scaling a project easy, as well as making it a great choice for enterprise-scale applications.

What’s more, TypeScript reduces the burden of debugging, with most common errors being flagged during development.

### Install the Angular CLI <a href="#install-the-angular-cli" id="install-the-angular-cli"></a>

You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Install the Angular cli:

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

### **Clone the shine repository** <a href="#create-a-workspace-and-initial-application" id="create-a-workspace-and-initial-application"></a>

```
git clone git@gitlab.com:shine2/user-interface.git
```

### Run the application <a href="#run-the-application" id="run-the-application"></a>

```
ng serve --open
```

### Run Test

```
ng test
```

### Generate the build for production&#x20;

It will generate the minified HTML, CSS and JS for deployment

```
ng build
```

### Deployment

Once we have the files from the previous step, we can host the file using any web server. We have chosen nginx because of its performance, reliability and being lightweight.

### Current User Interface in Shine

<https://www.sketch.com/s/081ca397-4c28-4813-b2d8-1ee76e478031>


---

# 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://shine-docs.chainflux.com/front-end-setup/ui.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.