Webapp

Installation

# install all dependencies
$ yarn install

Copy:

cp .env.template .env
cp cypress.env.template.json cypress.env.json

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

Build for Development

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

Build for Production

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

Run tests

We ensure the quality of our frontend code by using

ESLint for checking our JavaScript code
Jest and Vue Test Utils to unit test our components
Storybook to manually test our components in an isolated playground

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:

# run eslint
$ docker-compose exec webapp yarn lint

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

# 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 for each of these commands:

# run eslint
$ yarn lint

# run unit tests
$ yarn test

# start storybook
$ 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 into the main Human Connection repository and refactoring our components in the process. During this migration our new components will live in a view folder to separate them from the old, yet untouched components.

Folder Structure

The folder structure we are aiming for is based on the directory setup proposed by Nuxt.js:

assets contains icons, images and logos in svg format
components 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)
pages are the entry points for all routes in the app and are composed of features and components
styles holds all shared SCSS files such as variables and mixins

2.7 KiB Raw Blame History Unescape Escape