How to run a development environment for the frontend

This page describes a list of steps to follow to run a development environment for the frontend locally

We assume in this guide:

That you have access to a shell Terminal, either because you are running on a Linux/Mac operating system or Windows wth WSL 2 installed
And you have an Ontoportal appliance deployed on a server or locally where the API endpoint (e.g http:://your_appliance_ip:8080) can be accessed

Fork and clone the UI source code

First fork the ontoportal_web_ui repository. More details about how to can be found in the Github official doc

Then clone your forked repository locally

  git clone https://github.com/your_organization/ontportal_web_ui.git

The master branch represent the Bioportal version, if you want to have the Agroportal version. You have to merge the ontoportal-lirmm branch to your master, by doing so git merge ontoportal-lirmm master

Setting up the development config files

Environment and database variables

A sample file of .env can be found here:https://github.com/ontoportal-lirmm/bioportal_web_ui/blob/master/.env.sample

In command line do

cp .env.sample .env

cp config/database.yml.sample config/database.yml

Then edit the file config/database.yml with your user and password of your database. If using the docker infrastructure use the following config/database.yml

    development:
      adapter: mysql2
      encoding: utf8
      database: bioportal_ui
      username: root
      password: bp_user
      host: db

Update the development.rb file

A sample file of config/environments/development.rb can be found here:https://github.com/ontoportal/ontoportal_web_ui/blob/master/config/environments/development.rb

Update like below the line in config/environments/development.rb file

 # memcache setup
config.cache_store = ActiveSupport::Cache::MemCacheStore.new('cache', namespace: 'BioPortal')

Create bioportal_config_development.rb file

A sample file of config/bioportal_config_development.rb can be found here:https://github.com/ontoportal/ontoportal_web_ui/blob/master/config/bioportal_config_env.rb.sample

cp .env.sample .env

cp bioportal_config_env.rb.sample bioportal_config_development.rb

Update/Add the following lines to config/bioportal_config_development.rb

$HOSTNAME = 'localhost' # PUT YOUR SERVER HOSTNAME (IP) HERE

# The URL for the BioPortal Rails UI (this application)
$UI_URL = "http://#{$HOSTNAME}:3000"

# REST core service address
$REST_URL = "http://#{$HOSTNAME}:8080"
$SPARQL_URL = "http://#{$HOSTNAME}:8081/test/"

$BIOMIXER_URL = "http://#{$HOSTNAME}:8081/BioMixer"

$ANNOTATOR_URL = $PROXY_URL = "http://#{$HOSTNAME}:8081/annotator"

# If your BioPortal installation includes Fairness score set this to true
$FAIRNESS_DISABLED = false
$FAIRNESS_URL = "http://#{$HOSTNAME}:8081/fairness"

# NCBO annotator URL and apikey
$NCBO_ANNOTATOR_URL = "http://#{$HOSTNAME}:8081/ncbo_annotatorplus"
$NCBO_ANNOTATORPLUS_ENABLED = true
$NCBO_API_KEY = "4a5011ea-75fa-4be6-8e89-f45c8c84844e"

# Unique string representing the UI's id for use with the BioPortal Core
$API_KEY = "72c72cba-ad45-4785-b94e-483fa55cdddb"

$NOT_DOWNLOADABLE = []

Build the docker application

Source code of the docker infrastructure can be found here: Feature: Add docker environment for the UI ncbo/bioportal_web_ui#229

Install docker and docker-compose, see https://docs.docker.com/compose/install/

Build everything: The first time you run this it’s going to take 5-10 minutes depending on your internet connection speed and computer’s hardware specs. That’s because it’s going to download a few Docker images and build the Ruby + Yarn dependencies (1,5 GB for all).

docker compose build

Run the local development server

Run the docker environment

docker compose up

Setup database

docker compose exec web sh -c "bin/setup"

Run the rails server

docker compose exec web sh -c "bin/rails s -b 0.0.0.0"

Opening in browser

See http://localhost:3000