Skip to content

Latest commit

 

History

History
198 lines (138 loc) · 4.94 KB

README.md

File metadata and controls

198 lines (138 loc) · 4.94 KB
Raw

Build Status Version stable License Language grade: JavaScript

The frontend for the fragalysis tool

  • React, Redux and built using Webpack

XCHEM FRAGALYSIS Frontend Dev environment setup

Background

The stack consists of three services, running as containers: -

  • a MySQL database
  • a neo4j graph database
  • the fraglaysis stack
  • a transient data loader container

The stack is formed from code resident in a number of repositories. Begin by forking repositories you anticipate editing (although you really want to consider forking all the repositories as this is a relatively low-cost operation).

The repositories are:

Prerequisites

  • Docker
  • Git
  • NodeJS (v12)
  • Yarn
  • Some target data

Setup

Start with creating project directory, e.g.

mkdir fragalysis

Clone repositories

Note: You might want to work on frontend fork.

# git clone https://github.com/xchem/fragalysis-frontend.git
git clone https://github.com/pavol-brunclik-m2ms/fragalysis-frontend.git

Note: Fork if any work is expected.

Optional

git clone https://github.com/xchem/fragalysis-backend.git
git clone https://github.com/xchem/fragalysis-loader.git
git clone https://github.com/xchem/fragalysis-stack.git

Mandatory

# git clone https://github.com/xchem/dls-fragalysis-stack-openshift.git (Did not contain 'loader' image)
git clone https://github.com/InformaticsMatters/dls-fragalysis-stack-openshift.git

Build the images locally

Optional

pushd fragalysis-backend || exit
docker build . -t xchem/fragalysis-backend:latest
popd || exit

pushd fragalysis-loader || exit
docker build . -t xchem/fragalysis-loader:latest
popd || exit

pushd fragalysis-stack || exit
docker build . -t xchem/fragalysis-stack:latest
popd || exit

Mandatory

pushd dls-fragalysis-stack-openshift/images/loader || exit
docker build . -f Dockerfile-local -t loader:latest
popd || exit

Optional

pushd dls-fragalysis-stack-openshift/images/graph || exit
docker build . -t xchem/graph:latest
popd || exit

Create some key data directories

Note: The data/input/django_data directory will need to be populated with EXAMPLE data before you can launch the application.

mkdir -p data/input/django_data
mkdir -p data/mysql/data
mkdir -p data/neo4j/data
mkdir -p data/neo4j/logs
mkdir -p data/stack/media
mkdir -p data/stack/logs

Modify fragalysis-frontend/docker-compose.dev.yml file to look at right loader

  • ../data folders
  • DATA_ORIGIN: EXAMPLE -> will look for EXAMPLE folder in ../data/input/django_data/EXAMPLE
cd fragalysis-frontend/
yarn

Start webpack dev server

yarn start

Start fragalysis stack

docker-compose -f docker-compose.dev.yml up -d

Please wait, it takes a minute until all containers are fully started.

Test if we are running at http://localhost:8080

If needed stop containers

docker-compose -f docker-compose.dev.yml down

React webpack hot reloading

Inspired by https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/ and https://github.com/gaearon/react-hot-boilerplate/ and webpack-contrib/webpack-hot-middleware#255

Notes

To connect to web_dock container

docker exec -it web_dock /bin/bash

IDEs

WebStorm, PhpStorm

Please install following extension Prettier

Go to: Preferences, Tools, File watchers
Add Prettier
Prettier reccomended settings: Files to watch - Scope - All changed files

During the commit in this IDE, check Run Git hooks

Visual Studio Code

Please install following extensions

Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

ES-lint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Environments

to activate GitHub api create .env file and following environment variable

GITHUB_API_TOKEN=myGitHubToken

To create .env with token right away:

echo "GITHUB_API_TOKEN=myGitHubToken" > .env