Ontohub frontend

Table of Contents

• Setting up the development environment
  • Clone the repository
  • Install the dependencies
  • Visual Studio Code
• Used technologies
• Directory structure
• Common Tasks
  • Running the app in development mode
  • Run the tests
  • Run the linter on the entire project
  • Build the app in production mode

Setting up the development environment

We are using yarn to manage our frontend dependencies. If you haven't installed yarn yet, check out the install instructions here.

Clone the repository

git clone git@github.com:ontohub/ontohub-frontend

Install the dependencies

Inside the project directory, run yarn to install all needed dependencies.

Visual Studio Code

If you are using Visual Studio Code, there are some Plugins we recommend using while developing on this project:

• ESLint: Display code style issues in the editor
• Prettier - ESLint: Automatically format the code according to our code style
• Debugger for Chrome: Launch a Chrome instance and debug from within the editor
• Auto Close Tag: Automatically close HTML (and JSX) tags

You can install them via the Plugin Manager from inside the editor.

Used technologies

Language features and extensions

• ECMAScript 7 via Babel
• JSX

Rendering

• React
• Semantic UI

Routing

• React Router

API

• GraphQL
• React Apollo

Tests

• Jest

Directory structure

src
├── app.js
├── config
│   ├── apollo
│   │   ├── client.js
│   │   ├── queries
│   │   │   └── ...
│   │   └── ...
│   ├── routes.js
│   └── theme.json
├── lib
│   ├── __tests__
│   │   └── <...>.test.js
│   └── ...
└── scenes
    ├── __tests__
    │   ├── global.js
    │   ├── home.js
    │   ├── organizational-unit.js
    │   ├── repository.js
    │   └── <...>.js
    ├── global.js
    ├── global
    │   ├── __tests__
    │   │   └── <...>.js
    │   └── ...
    ├── home.js
    ├── home
    │   ├── __tests__
    │   │   └── header.js
    │   │   └── <...>.js
    │   ├── header.js
    │   └── ...
    ├── organizational-unit.js
    ├── organizational-unit
    │   ├── __tests__
    │   │   └── header.js
    │   │   └── <...>.js
    │   ├── header.js
    │   └── ...
    ├── repository.js
    ├── repository
    │   ├── __tests__
    │   │   └── header.js
    │   │   └── <...>.js
    │   ├── header.js
    │   └── ...
    └── ...

Common tasks

Running the app in development mode

yarn start

Run the tests

yarn test

Run the code formatter on the entire project

yarn format

Build the app in production mode

yarn build