Lyrio UI

The web frontend of Lyrio.

Development

Clone this git repo and install dependencies:

$ git clone [email protected]:lyrio-dev/ui.git lyrio-ui
$ cd lyrio-ui
$ yarn

By default this app listens on 0.0.0.0:3000, you can change this with the environment variables PORT and HOST. You can use nginx as reversed proxy to access the app with a domain name like lyrio-ui.test.

Start lyrio API server. For example, if the API server in accessible on http://lyrio.test, the API endpoint is actually http://lyrio.test (without /api).

• If the API endpoint is not the same as the lyrio-ui's root url, you should replace the __api_endpoint__ string in lyrio-ui's HTML (e.g. with Nginx's ngx_http_sub_module module) with the API endpoint (in the form of JS expression, e.g. "http://lyrio.test").
• To change the initial title of the page, replace __default_title__.
• To load compiled frontend resources from another host, replace __public_path__.
• To change the favicon, replace __favicon__.

All these replacements work in development or production environment.

Here's a Nginx development configuration file for reference (don't forget to add the .test domains to your hosts or local DNS server):

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
    server_name lyrio-ui.test;
    listen 80;

    location / {
        proxy_read_timeout 300s;
        proxy_send_timeout 300s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Accept-Encoding "";

        sub_filter '__default_title__' '"Default Title"';
        sub_filter '__api_endpoint__' '"http://lyrio.test"';
        sub_filter_once on;

        proxy_pass http://127.0.0.1:3000;
    }
}

server {
    server_name lyrio.test;
    listen 80;

    location / {
        proxy_read_timeout 300s;
        proxy_send_timeout 300s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_pass http://127.0.0.1:2002;
    }
}

If you run API server and the frontend app server on different origins like me, you should enable crossOrigin in this server's config and configure the API server to white list this server's origin. For example, if you access this server on http://lyrio-ui.test:

security:
  crossOrigin:
    enabled: true
    whiteList:
      - http://lyrio-ui.test

Start the development server:

$ yarn start

Wait for Vite to finish compilation and the development server to start, then open http://lyrio-ui.test.