Skip to content

Deploying LiberouterGUI

Jump to bottom
Jakub Neruda edited this page Sep 25, 2017 · 24 revisions

Table of Contents

  1. Introduction
  2. Installing modules
  3. Installing internal dependencies
    1. Frontend dependencies
    2. Backend dependencies
  4. Deploying system itself
    1. Development version
    2. Production version

Introduction

There are two ways how to run lgui:

  1. Development version - Frontend reloads every time you edit and save a file. Backend runs a program. Loading times are a bit longer, but there's basically none extra configuration needed to start the system.
  2. Production version - Frontend has to be compiled into index.html and minified .js files. Backend is executed via wsgi. Loading times for the end user are shorter, but there's quite a lot of steps to start the system.

This guide details both approaches but the first step is bootstrapping modules you want to have in lgui. This process is the same for both approaches.

Installing modules

Once you have decided on what mixture of your own modules and "official" modules for lgui you want to run, you can clone them into the modules/ folder. Modules developed by CESNET organization are guaranteed to work that way, for the third party modules please double check the presence of config.json with module's root.

NOTE: By 'guaranteed to work' we mean that module does not require any additional steps before it can be bootstrapped. You still have to perform feature configuration. For example, SecurityCloud module requires paths to various binaries and auxiliary files to be configured as these are not installation independent.

With the modules in place, you can run the bootstrap.py located in the root of lgui project. If it finishes without any message, huzzah! If it report any errors, try to resolve them and run it again.

And what bootstrapping does? It symlinks backend/frontend codes of each module to proper folders within lgui project, merges all dependencies into package.json, .angular-cli.json and requirements.txt and generates a file that tells Angular to include the frontend sources into main app.

Installing internal dependencies

Once you successfully set up bootstrapped modules, you have to install internal dependencies. This step has to be performed each time you update your modules both by adding a new one or updating existing one. You can only install internal dependencies once you've installed the main ones.

Frontend dependencies

Go to frontend/. Run this command:

npm install

Backend dependencies

Go to backend/. At this point, you can setup virtual environment for python packages you're going to install. If you don't want to, just skip the following step:

virtualenv venv
source venv/bin/activate

Now simply tell pip to install the dependencies:

pip3 install -r requirements.txt

If you're using virtualenv run deactivate to exit it now.

Deploying the system itself

Development version

Follow this guide if you're creating a new module, otherwise use the production deployment. For the next steps, screen utility may come in handy as you're be running two (three) separate processes and want to see their outputs.

First off, start whatever database daemon you fancy and lgui is supporting. As you might now need output from this one, you can run it as a service.

Backend

Second, we'll be running the backend part. Before you can run anything, co to backend/ and rename config-sample.ini to config.ini. Then activate virtual environment (if you opted to using it). After that, return to root of lgui project and run:

python3 backend

Frontend

Go to frontend/ and run following command:

ng serve --host <your_ip> --proxy proxy.json

Where your_ip is either:

  • IP of your device on the interface you want to run the lgui
  • If you just need localhost functionality, use 0.0.0.0 as your ip

If both backend and frontend started properly, open your browser on your_ip:4200. Try to log in, gui will detect first time startup and throw you to the setup page, where you'll create the admin account and then to gui itself.

Production version

Apart from running the database, production version behaves quite differently. Instead of having frontend dynamically recompiled each time you'll edit a source code, production version compiles all sources into *.html and *.js files that will be server by Apache (or your favourite web server). Python backend will be executed via persistent wsgi.

Backend

You need to install mod_wsgi for your web server to be able to make rest of this guide work. In case you are using Python3.4 and CentOS7, which does not have correct version available for the apache, do the following:

yum install httpd-devel gcc
mod_wsgi-express module-config >/etc/httpd/conf.modules.d/00-wsgi.conf
systemctl restart httpd

With the proper wsgi module installed, you need to configure /etc/httpd/conf/httpd.conf. In README in backend/ you can fing configuration for secure connections, following configuration is simplified for local use:

ErrorLog '/tmp/log.txt'
LogLevel info

<VirtualHost *:80>
    DocumentRoot "/var/www/html/"
    WSGIDaemonProcess libapi threads=5
    WSGIScriptAlias "/libapi" "/path/to/backend/wsgi.py"
    WSGIPassAuthorization on

    <directory "/path/to/backend">
        WSGIProcessGroup libapi
        WSGIApplicationGroup %{GLOBAL}
        WSGIScriptReloading On

        Options All
        AllowOverride All
        Require all granted
    </directory>
</VirtualHost>

Don't forget to set up proper paths within that configuration. Also make sure that this path is open for reading for the apache user. In case of any errors, check /tmp/log.txt file for more info the matter.

Frontend

For the sake of the guide, we'll be serving frontend from /var/www/html/lgui. In frontend/, instead of ng serve execute this command:

ng build --prod --bh="/lgui/" --aot=false

After a succeful compilation, the should be now directory frontend/dist. Copy all of its contents to /var/www/html/lgui. Please note that --bh parameter determines path to root of the gui from root of the we server. Apache has its root at /var/www/html and thus path to root og ui is /lgui/. Do not omit the final slash!

Make sure that within lgui/assets there is a config.json. At this point your web browser should be able to load and display login screen of gui at http://localhost/lgui/.

Clone this wiki locally