# Webapp

![UI Screenshot](https://4234572995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LcGvGRsW6DrZn7FWRzF%2F-LcGv6EiVcsjYLfQ_2YE%2F-LcGvBGCoAHJXiHzFA_L%2Fscreenshot.png?generation=1555078892017568\&alt=media)

## Installation

```bash
# install all dependencies
$ cd webapp/
$ yarn install
```

Copy:

```
# in webapp/
cp .env.template .env
```

Configure the files according to your needs and your local setup.

### Build for Development

```bash
# serve with hot reload at localhost:3000
$ yarn dev
```

### Build for Production

```bash
# build for production and launch server
$ yarn build
$ yarn start
```

### Run tests

We ensure the quality of our frontend code by using

* [ESLint](https://eslint.org/) for checking our JavaScript code
* [Jest](https://jestjs.io/) and [Vue Test Utils](https://vue-test-utils.vuejs.org/) to unit test our components
* [Storybook](https://storybook.js.org/) to document and manually test our components in an isolated playground

For more information see our [frontend testing guide](https://docs.human-connection.org/human-connection/testing/testing). Use these commands to run the tests:

{% tabs %}
{% tab title="With Docker" %}
After starting the application following the above guidelines, open new terminal windows for each of these commands:

```bash
# run eslint
$ docker-compose exec webapp yarn lint
```

```bash
# run unit tests
$ docker-compose exec webapp yarn test
```

```bash
# start storybook
$ docker-compose exec webapp yarn storybook
```

You can then visit the Storybook playground on `http://localhost:3002`
{% endtab %}

{% tab title="Without Docker" %}
After starting the application following the above guidelines, open new terminal windows and navigate to the `/webapp` directory for each of these commands:

```bash
# run eslint in /webapp (use option --fix to normalize the files)
$ yarn lint
```

```bash
# run unit tests in /webapp
$ yarn test
```

```bash
# run locales in /webapp (use option --fix to sort the locales)
$ yarn locales
```

```bash
# start storybook in /webapp
$ yarn storybook
```

You can then visit the Storybook playground on `http://localhost:3002`
{% endtab %}
{% endtabs %}

## Styleguide Migration

We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `_new/` folder to separate them from the old, yet untouched components.

### Folder Structure

The folder structure we are following is [prescribed by Nuxt.js](https://nuxtjs.org/guide/directory-structure):

* **assets** contains icons, images and logos in `svg` format and all shared SCSS files such as `tokens`
* **components** separated into two sub-folders:
  * **generic** are the generic building blocks of the app – small, reusable and usually not coupled to state
  * **features** are composed of components but tied to a particular function of the app (e.g. `comment` or `post`)
* **layouts** can use components to create layout templates for pages
* **pages** are the entry points for all `routes` in the app and are composed of layouts, features and components


---

# 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.human-connection.org/human-connection/webapp.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.