Skip to content

Host the DTaaS Client Website

Tip

The Localhost installation setup is a faster way to use the DTaaS software. You might want to consider the localhost option before using only the DTaaS-client.zip package.

To host DTaaS client website on your server, follow these steps:

  • Download the DTaaS-client.zip from the releases page.

  • Inside the DTaaS-client directory, there is site directory. The site directory contains all the optimized static files that are ready for deployment.

  • Setup the oauth application on gitlab instance. See the instructions in authorization page for completing this task.

  • Locate the file site/env.js and replace the example values to match your infrastructure. The constructed links will be "REACT_APP_URL/REACT_APP_URL_BASENAME/{username}/{Endpoint}". See the definitions below:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
if (typeof window !== 'undefined') {
  window.env = {
    REACT_APP_ENVIRONMENT: "prod | dev",
    REACT_APP_URL: "URL for the gateway",
    REACT_APP_URL_BASENAME: "Base URL for the client website"(optional),
    REACT_APP_URL_DTLINK: "Endpoint for the Digital Twin",
    REACT_APP_URL_LIBLINK: "Endpoint for the Library Assets",
    REACT_APP_WORKBENCHLINK_VNCDESKTOP: "Endpoint for the VNC Desktop link",
    REACT_APP_WORKBENCHLINK_VSCODE: "Endpoint for the VS Code link",
    REACT_APP_WORKBENCHLINK_JUPYTERLAB: "Endpoint for the Jupyter Lab link",
    REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK:
      "Endpoint for the Jupyter Notebook link",
    REACT_APP_CLIENT_ID: 'AppID genereated by the gitlab OAuth provider',
    REACT_APP_AUTH_AUTHORITY: 'URL of the private gitlab instance',
    REACT_APP_REDIRECT_URI: 'URL of the homepage for the logged in users of the website',
    REACT_APP_LOGOUT_REDIRECT_URI: 'URL of the homepage for the anonymous users of the website',
    REACT_APP_GITLAB_SCOPES: 'OAuth scopes. These should match with the scopes set in gitlab OAuth provider',
  };
};

// Example values with no base URL. Trailing and ending slashes are optional.
if (typeof window !== 'undefined') {
  window.env = {
    REACT_APP_ENVIRONMENT: 'prod',
    REACT_APP_URL: 'https://foo.com/',
    REACT_APP_URL_BASENAME: '',
    REACT_APP_URL_DTLINK: '/lab',
    REACT_APP_URL_LIBLINK: '',
    REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
    REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
    REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
    REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
    REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
    REACT_APP_REDIRECT_URI: 'https://foo.com/Library',
    REACT_APP_LOGOUT_REDIRECT_URI: 'https://foo.com/',
    REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
  };
};


// Example values with "bar" as basename URL.
//Trailing and ending slashes are optional.
if (typeof window !== 'undefined') {
  window.env = {
    REACT_APP_ENVIRONMENT: "dev",
    REACT_APP_URL: 'https://foo.com/',
    REACT_APP_URL_BASENAME: 'bar',
    REACT_APP_URL_DTLINK: '/lab',
    REACT_APP_URL_LIBLINK: '',
    REACT_APP_WORKBENCHLINK_VNCDESKTOP: '/tools/vnc/?password=vncpassword',
    REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
    REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
    REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
    REACT_APP_CLIENT_ID: '934b98f03f1b6f743832b2840bf7cccaed93c3bfe579093dd0942a433691ccc0',
    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',
    REACT_APP_REDIRECT_URI: 'https://foo.com/bar/Library',
    REACT_APP_LOGOUT_REDIRECT_URI: 'https://foo.com/bar',
    REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
  };
};

  • Copy the entire contents of the build folder to the root directory of your server where you want to deploy the app. You can use FTP, SFTP, or any other file transfer protocol to transfer the files.

  • Make sure your server is configured to serve static files. This can vary depending on the server technology you are using, but typically you will need to configure your server to serve files from a specific directory.

  • Once the files are on your server, you should be able to access your app by visiting your server's IP address or domain name in a web browser.

The website depends on Traefik gateway and ML Workspace components to be available. Otherwise, you only get a skeleton non-functional website.

Complementary Components

The website requires background services for providing actual functionality. The minimum background service required is atleast one ML Workspace serving the following routes.

1
2
3
4
https://foo.com/<username>/lab
https://foo.com/<username>/terminals/main
https://foo.com/<username>/tools/vnc/?password=vncpassword
https://foo.com/<username>/tools/vscode/

The username is the user workspace created using ML Workspace docker container. Please follow the instructions in README. You can create as many user workspaces as you want. If you have two users - alice and bob - on your system, then the following the commands in will instantiate the required user workspaces.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
mkdir -p files/alice files/bob files/common

printf "\n\n start the user workspaces"
docker run -d \
 -p 8090:8080 \
  --name "ml-workspace-alice" \
  -v "$(pwd)/files/alice:/workspace" \
  -v "$(pwd)/files/common:/workspace/common" \
  --env AUTHENTICATE_VIA_JUPYTER="" \
  --env WORKSPACE_BASE_URL="alice" \
  --shm-size 512m \
  --restart always \
  mltooling/ml-workspace-minimal:0.13.2

docker run -d \
 -p 8091:8080 \
  --name "ml-workspace-bob" \
  -v "$(pwd)/files/bob:/workspace" \
  -v "$(pwd)/files/common:/workspace/common" \
  --env AUTHENTICATE_VIA_JUPYTER="" \
  --env WORKSPACE_BASE_URL="bob" \
  --shm-size 512m \
  --restart always \
  mltooling/ml-workspace-minimal:0.13.2

Given that multiple services are running at different routes, a reverse proxy is needed to map the background services to external routes. You can use Apache, NGINX, Traefik or any other software to work as reverse proxy.

The website screenshots and usage information is available in user page.