Quick start

Make sure Docker is installed and running on your machine.

To build the image and start a container, run:

  svn checkout https://ad-svn.informatik.uni-freiburg.de/student-theses/olivier-puraye/completesearch-ui/
  cd completesearch-ui
  docker-compose up -d --build

Verify if the container is running

  docker ps

There should be a container named completesearch and the web app should show up under http://localhost:9980

If you need to change the ports, volume paths or the application host, you need to edit docker-compose.yml or docker-compose-dev.yml accordingly.

Notes

• Set HOST environment variable to domain or IP that will be used to serve the application e.g. HOST=completesearch.puraye.com
• When using volume for ./uploadedFiles, make sure it can be written to by nginx: sudo chown www-data:www-data uploadedFiles
• When adjusting ports, make sure to also update the corresponding environment variables accordingly

Default docker-compose.yml

version: "2"
services:
  completesearch:
    build:
      context: .
      dockerfile: ./Dockerfile
    volumes:
      # Volume for file uploads
      #- ./uploadedFiles:/var/completesearch/uploadedFiles

      # Initial training Datasets (optional)
      # The repo already contains training data for the datsets in nfs/students/olivier-puraye/csv-files
      #- ./datasets:/var/completesearch/dataset-analysis/datasets
    environment:
      - WEBSOCKET_PORT=9981
      - COMPLETITION_SERVER_PORT_RANGE=9982-10000
      - HOST=localhost # host of application server
    ports:
      - 9980:80               # http
      - 9981:5000             # websockets
      - 9982-10000:8888-8906  # search servers
    container_name: completesearch

Development environment

If you want to make changes to the codebase, build the development image, which mounts the codebase and input datasets as volumes.

  svn checkout https://ad-svn.informatik.uni-freiburg.de/student-theses/olivier-puraye/completesearch-ui/
  cd completesearch-ui  
  docker-compose -f docker-compose-dev.yml up -d --build

Now you can access the container and start the AppServer manually and the web is served to http://localhost:9980

  docker exec -it completesearch-dev bash
  make build-all
  make compile-helpers -C ./dataset-analysis/helper
  make compile-all -C ./dataset-analysis
  cd ./websockets
  make compile
  ./AppServerMain

Node development environment

Note: This section is only relevant if you want to make changes to the user interface

The user interface is a ReactJS application and uses JSX and ES6+ syntax. Moreover the styling is written in SASS and it uses a SVG icon system, that enables inline SVG styling.

To make this all work, it is recommended to use a task runner such as Gulp, that watches the files and refreshes the browser content automatically when changes are made.

Follow these instructions to set up the environment:

1. An installation of Node.js and its package manager is required.
2. Then install Gulp:

   npm install --global gulp-cli
   

3. All the required node modules can be added, that are defined in the package.json

   cd codebase/userinterface/
   npm install
   

4. To start the build process, run:

   cd codebase/userinterface/
   gulp
   

This should start a local development server on http://localhost:5000

Asset Pipeline

• compiles and combines scss/**/*.scss into dist/global.css
• generates dist/icons.svg from icons/*.svg
• compiles JSX files using Babel and combines js/**/*.js into dist/js/bundle.js

Manual installation

If you don’t like Docker, you can install everything manually by following the steps in the Dockerfile