Webapp
UI Screenshot

Installation

1
# install all dependencies
2
$ cd webapp/
3
$ yarn install
Copied!
Copy:
1
# in webapp/
2
cp .env.template .env
Copied!
Configure the files according to your needs and your local setup.

Build for Development

1
# serve with hot reload at localhost:3000
2
$ yarn dev
Copied!

Build for Production

1
# build for production and launch server
2
$ yarn build
3
$ yarn start
Copied!

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 document and manually test our components in an isolated playground
For more information see our frontend testing guide. Use these commands to run the tests:
With Docker
Without Docker
After starting the application following the above guidelines, open new terminal windows for each of these commands:
1
# run eslint
2
$ docker-compose exec webapp yarn lint
Copied!
1
# run unit tests
2
$ docker-compose exec webapp yarn test
Copied!
1
# start storybook
2
$ docker-compose exec webapp yarn storybook
Copied!
You can then visit the Storybook playground on http://localhost:3002
After starting the application following the above guidelines, open new terminal windows and navigate to the /webapp directory for each of these commands:
1
# run eslint in /webapp (use option --fix to normalize the files)
2
$ yarn lint
Copied!
1
# run unit tests in /webapp
2
$ yarn test
Copied!
1
# run locales in /webapp (use option --fix to sort the locales)
2
$ yarn locales
Copied!
1
# start storybook in /webapp
2
$ yarn storybook
Copied!
You can then visit the Storybook playground on http://localhost:3002

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 _new/ folder to separate them from the old, yet untouched components.

Folder Structure

The folder structure we are following is prescribed by Nuxt.js:
    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
Last modified 1yr ago