Human Connection
1.0.0
1.0.0
  • Introduction
  • Edit this Documentation
  • Installation
  • Neo4J
  • Backend
    • GraphQL
    • neo4j-graphql-js
  • Webapp
    • Components
    • HTML
    • SCSS
    • Vue
  • Testing Guide
    • End-to-end tests
    • Frontend tests
    • Backend tests
  • Contributing
  • Kubernetes Deployment
    • Minikube
    • Digital Ocean
      • Kubernetes Dashboard
      • HTTPS
    • Human Connection
      • Error Reporting
      • Mailserver
      • Maintenance
    • Volumes
      • Neo4J Offline-Backups
      • Neo4J Online-Backups
      • Volume Snapshots
      • Reclaim Policy
      • Velero
    • Metrics
    • Legacy Migration
  • Feature Specification
  • Code of conduct
  • License
Powered by GitBook
On this page
  • Installation
  • Build for Development
  • Build for Production
  • Run tests
  • Styleguide Migration
  • Folder Structure

Was this helpful?

Webapp

Previousneo4j-graphql-jsNextComponents

Last updated 5 years ago

Was this helpful?

Installation

# 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

# 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

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

After starting the application following the above guidelines, open new terminal windows and navigate to the /webapp directory for each of these commands:

# run eslint in /webapp (use option --fix to normalize the files)
$ yarn lint
# run unit tests in /webapp
$ yarn test
# run locales in /webapp (use option --fix to sort the locales)
$ yarn locales
# start storybook in /webapp
$ yarn storybook

You can then visit the Storybook playground on http://localhost:3002

Styleguide Migration

Folder 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

for checking our JavaScript code

and to unit test our components

to document and manually test our components in an isolated playground

For more information see our . Use these commands to run the tests:

We are currently in the process of migrating our styleguide components and design tokens from the into the main 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.

The folder structure we are following is :

ESLint
Jest
Vue Test Utils
Storybook
frontend testing guide
Nitro Styleguide
Human Connection repository
prescribed by Nuxt.js
UI Screenshot