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:
- An installation of Node.js and its package manager is required.
- Then install Gulp:
npm install --global gulp-cli
- All the required node modules can be added, that are defined in the package.json
cd codebase/userinterface/ npm install
- 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
intodist/global.css
- generates
dist/icons.svg
fromicons/*.svg
- compiles JSX files using Babel and combines
js/**/*.js
intodist/js/bundle.js
Manual installation
If you don’t like Docker, you can install everything manually by following the steps in the Dockerfile