Install VUE frontend for ART-DECOR®

To perform the following instructions you need to have root ssh access to your server. Alternatively, you can use the sudo command accordingly.

NOTE

Since ART-DECOR Release 3.5, the VUE frontend always has to run together with ART-DECOR HTTP Proxy. Therefore this installation describes how to install both.

Preliminaries

Along with the typical unix command you also need to check / install the following commands. Use the unix package management system like yum (Yellow-Dog Updater Modified) or dnf (Dandified yum) or rpm to install the commands.

> git --version
git version 1.8.3.1
# optionally install git

> npm -v
8.15.0
# optionally install npm

At the time of writing this documentation the required versions (or higher) are shown. Please check.

Place the install script and settings file

We adivice to place ART-DECOR related stuff in /opt. You may choose for another location but our instructions refer to that directory.

First create the art-decor-vue directory if it does not exist.

mkdir /opt/art-decor-vue

Change directory.

cd /opt/art-decor-vue

Download the scripts and settings files from the repository.

https://bitbucket.org/art-decor/art-decor-external-tools/src/master/art-decor-vue/

Change access rights for the scripts.

chmod +x ./vue_pull.sh
chmod +x ./vue_patch_env.sh
chmod +x ./proxy_pull.sh
chmod +x ./proxy_systemd_deploy.sh

Typical location for VUE frontend

The typical location for the vue frontend files are in the respective directory for the website in a subdirectory ad. As an example if your website http files are located in /xxx/yyy/httpdocs the typical directory for the VUE frontend files is /xxx/yyy/httpdocs/ad.

Install VUE frontend

Get the VUE frontend from the repo and install it.

If you install it on a local machine (laptop etc.) use

./vue_pull.sh

On servers run the script as shown here

./vue_pull.sh --local

Install ART-DECOR HTTP Proxy

Get the ART-DECOR HTTP Proxy from the repo and install it.

./proxy_pull.sh

This action also starts the ART-DECOR HTTP Proxy at port 3000.

Additional first time installation actions

When installing the ART-DECOR HTTP Proxy for the first time, please consider to run the systemd installation as well. This creates a systemd script with proxy_systemd_deploy.sh, named: art-decor-http-proxy.service

./proxy_systemd_deploy.sh

With this you can check, start and stop the ART-DECOR HTTP Proxy service.

systemctl status art-decor-http-proxy.service
systemctl start art-decor-http-proxy.service
systemctl stop art-decor-http-proxy.service

NOTE

The ART-DECOR HTTP Proxy service is started / restarted also upon updating it using the normal installer/updater. Only if there are updates in the repository, rebuild and stop/start is performed.

./proxy_pull.sh

NGINX settings

Existing NGNX

Your nginx settings shall be adapted. Consider adding the following location additions.

# AD3 routes
# rewrite /exist/apps/api to proxy
location /exist/apps/api {
	proxy_connect_timeout       900;
	proxy_send_timeout          900;
	proxy_read_timeout          900;
	send_timeout                900;
	proxy_pass http://localhost:3000;
}
# end of location /exist

# rewrite proxies
location /socket.io {
	proxy_connect_timeout       900;
	proxy_send_timeout          900;
	proxy_read_timeout          900;
	send_timeout                900;
	proxy_pass http://localhost:3000;
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
}
location /image-proxy {
	proxy_connect_timeout       900;
	proxy_send_timeout          900;
	proxy_read_timeout          900;
	send_timeout                900;
	proxy_pass http://localhost:3000;
}
# end proxies

# AD2 routes
# rewrite /art-decor
location /art-decor {
	# 20171011 timeouts
	proxy_connect_timeout       900;
	proxy_send_timeout          900;
	proxy_read_timeout          900;
	send_timeout                900;
	proxy_pass http://localhost:8080/art-decor;
}
# end of location /art-decor

# rewrite /ada
location /ada {
	proxy_pass http://localhost:8877/exist/ada;
}
# end of location /ada

# rewrite /art
location /art {
	proxy_pass http://localhost:8877/exist/art;
}
# end of location /art

# rewrite /decor
location /decor/ {
	# 20170726 timeouts
	proxy_connect_timeout       900;
	proxy_send_timeout          900;
	proxy_read_timeout          900;
	send_timeout                900;
	proxy_pass http://localhost:8877/exist/decor/;
}
# end of location /decor

# rewrite /fhir
location /fhir/ {
	proxy_pass http://localhost:8877/exist/fhir/;
}
# end of location /fhir

# rewrite /xis
location /xis {
	proxy_pass http://localhost:8877/exist/xis;
}
# end of location /xis

# rewrite /systemtasks
location /systemtasks {
	proxy_pass http://localhost:8877/exist/systemtasks;
}
# end of location /systemtasks

# rewrite /temple
location /temple {
	proxy_pass http://localhost:8877/exist/apps/temple;
}
# end of location /temple

# terminology route
# rewrite /terminology
location /terminology {
	proxy_pass http://localhost:8877/exist/terminology;
}
# end of location /terminology

If you encounter difficulties in reaching the eXist-DB Monitor, please consider adding the following location statement to your nginx setting.

location /exist/status {
	proxy_pass http://localhost:8877/exist/status;
}

Setting up NGINX from scratch

If you need to set up NGINX config from scratch, please add the following config file artdecor.conf for ART-DECOR, typically in the conf.d subdirectory of your NGINX installation.

server {
  # all requests to port 80 are redirected to SSL, see below
	listen 80;
	listen [::]:80;
	server_name _;
	root /path/to/your/html;
	index index.html;
	location / {
        return 301 https://$host$request_uri;
    }
}

server {
	# set up SSL conncetion with proper certificates
  listen 443 ssl http2;
  listen       [::]:443 ssl http2;
  server_name  _;
  root /path/to/your/html;
  index index.html;
  
	client_max_body_size 134217728;

	# SSL certificates
  ssl_certificate "/path/to/certificate/fullchain.pem";
	ssl_certificate_key "/path/to/certificate/privatekey.pem";
	ssl_session_cache shared:SSL:1m;
  ssl_session_timeout  10m;
  ssl_ciphers PROFILE=SYSTEM;
	ssl_prefer_server_ciphers on;
 
	# - - - add here all location statements from the above listing - - - 

	# add custom error pages (optional)
	error_page 404 /artdecor_404.html;
	location = /artdecor_404.html {
     root /path/to/your/html;
     internal;
	}
  error_page 500 502 503 504 /artdecor_50x.html;
  location = /artdecor_50x.html {
     root /path/to/your/html;
     internal;
  }
  
}

Hint for running the temple app in non-nginx environments

If you are working locally e.g. a laptop and/or do not have an nginx with the above rules running, you need to tweak the template service call in the frontend to behave properly.

In your local frontend directory were you build your app using npm there is also a file called .env. Edit this file and adapt the line with VUE_APP_EXIST_ORIGIN to look like the one shown here.

############ Other settings ############
# Origin of the eXist-db server.
# This is used for direct links to (for example) Temple.
VUE_APP_EXIST_ORIGIN=http://localhost:8877/exist/apps
Last Update:
Contributors: dr Kai U. Heitmann, Maarten Ligtvoet