How to host Thrinacia Web UI on your own web server

Normally all standalone Web UI’s or reference applications are hosted on Thrinacia front-end servers where we use CDN and other caching techniques as well as cache busting to ensure optimal delivery. This is turn key and automatically provided with your subscription plan so you don’t need to do anything else.

However sometimes you want to host Standalone Web UI provided by us on your own server as you are making modifications there directly or integrating with other applications you have on your own server. Below we describe simple method on how to do this using nginx web server. We will not be discussing Apache web server, but if you wanted to use this web server then you could take similar approach.

Step 1. Get a hosting account. Examples would be Digital Ocean, Vultr, Google Cloud Platform, Amazon AWS, etc.

Step 2. Install OS such as Linux or *BSD and web server such as nginx. On Linux Ubuntu you could do “sudo apt install nginx”. More detailed instructions are shown here: https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04

Step 3.  Git clone the Web UI repository (Core or Reach) to your web root of the webserver as per below. You can get all sources from our git repositories found here: https://github.com/Thrinacia

cd /var/www/sites/mywebsite
git clone https://github.com/Thrinacia/webui-v1-core

Step 4.Add the app_local.js file into your angapp folder. Sample of the app_local.js file is below. You will need to change it to match your own REST API backend that is part of your subscription plan.

// API settings
app.constant( 'API_URL', {
  url : "https://origin.thrinacia.com/api",
  loc : "/service/restv1/"
} );

// Translation settings
app.constant( 'LANG', {
  DEFAULT_LANG : "en",
  PREFERRED_LANG : "en"
} );

// CDN settings
app.constant( 'CDN', {
  APP_URL : "https://cdn5.thrinacia.com/**"
} );

// Widget settings
app.constant( 'SEDRA', {
 url : "https://your.website.com",
 loc: ''
} );

Step 5.Adjust the nginx web server configuration. Edit the /etc/nginx/nginx.conf file and add the following code to your http section.

server {
  listen 80;
  server_name mywebsite.com;

  access_log /var/log/mywebsite.com-access.log
  error_log /var/log/mywebsite.com-error.log;

  root /var/www/sites/mywebsite/angapp;

  if (!-e $request_filename) { 
    rewrite ^/(.*) /index.html;
  }
}

You can now visit your website at http://mywebsite.com (assuming your Domain DNS records are setup correctly) and view your reference web application that you git cloned in Step 3 above.

This shows the basic configuration. Note that there is many other options you could add for API proxy, pre-rendering the content to search robots, CDN rewriting and so on. Again these steps should only be done if you are not wanting to host the Web UI on Thrinacia provided front-end cluster where we do everything automatically once you are subscribed to a plan.