The new datafari UI based on React can be used directly into Datafari starting from Datafari 5.0.

In this page, we will indicate how to use it out of the box into Datafari or how to build it if you want to download the source code and to do some changes into it.

Use it into Datafari

The new Datafari UI currently in Alpha is directly integrated into the code of Datafari.

To use it simply enter /datafariui into the URL of your Datafari.

For example, if you access to Datafari by this URL : https://mydatafari.com/Datafari the path to access to the React DatafariUI will be :

https://mydatafari.com/datafariui

Build DatafariUI

Download the source code

The DatafariUI project is on GitHub, the homepage of the project is here :

https://github.com/francelabs/DatafariUI

So do a git clone of the project to download the source code.

Install Node

To build the UI you will need node and npm. Install the latest LTS version of node from their website: https://nodejs.org/en/ (packet managers are often quite behind and older versions might not work as intended).

This should also install npm as part of the installation.

Build and configure for production

Install the dependencies locally

Before building the project, you need to download all the dependencies locally using npm. To do so run the following command at the root directory of the project:

npm install

Build the production ready package

To build the production ready version of the app go to root folder of the project and run:

npm run build

This will create a build folder containing the production version of the DatafariUI. By default, this build expects to be reachable on the server using the path any.domain.test/datafariui.

This can be modified by changing content of the following file at the root of the project:

.env.production

The rest of this documentation, in particular Apache configuration, assumes that the content of this file is the following:

PUBLIC_URL=/datafariui

Move the build to its final location

Once the application is built, the content of the build folder needs to be moved to its final location.

I found it best to put it as part of the installation folder, which is by default /opt/datafari.

You can copy the build folder to /opt/datafari/www for exemple:

cp -R build /opt/datafari/www

Once the build folder is in position, we need to configure apache2 to serve it correctly.

Configuring apache2 to serve datafariui

It is necessary to add some elements to the tomcat.conf apache configuration file that is shipped with datafari to serve datafariUI.

After 12, 13:

RedirectMatch ^/$ /Datafari
ProxyRequests Off

add the following lines:

Alias /datafariui /opt/datafari/www/
<Directory "/opt/datafari/www">
  Require all granted
  Options -MultiViews
  RewriteEngine On
  RewriteBase "/datafariui/"
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule "^" "index.html" [QSA,L]
</Directory>

Save the configuration file, restart apache2 and you should be able to reach datafariui through: mydomain.test/datafariui

Development Configuration

It is possible to run a local development version of the application (easier to reload and access debug variables) against a copy of Datafari that runs on the same network with a bit of configuration.

Running the development server for datafariui

The development server can be configured to be served at any path, the default is the same as the production one, i.e. /datafariui. It can be changed in the file:

.env.development

The rest of the documentation assumes the default configuration is in place.

To start the development server, at the root folder of the project simply run:

npm start

This will start a development serer listening on port 3000 on the local machine and recompiling and updating itself anytime a change occurs in one of the project files.

Accessing this server directly won’t result in a usable app for two reasons:

1. the app is expected to be deployed at /datafariui and it is most likely been deployed at the root of the dev server i.e.

2. Datafari’s APIs won’t be available as datafariui expects Datafari to be deployed on the same domain at the /Datafari path and it is not the case right now

Those are addressed in the following section

Configuring Datafari to serve datafariui development server

First install your Datafari and run it as usual (probably on a VM).

Then edit the apache2 configuration file:

tomcat.conf

If they are present, comment out the lines dedicated to the production datafariui:

#Alias /datafariui /opt/datafari/www/

#<Directory "/opt/datafari/www">
#  Require all granted
#  RewriteEngine On
#  RewriteCond %{REQUEST_FILENAME} !-f
#  RewriteRule ^/datafariui/ /datafariui/index.html [QSA,L]
#</Directory>

And right below them add the following lines (replacing XX.XX.XX.XX by the IP of the machine running the datafariui development server on your network):

#datafariui
ProxyPass /datafariui http://XX.XX.XX.XX:3000/datafariui
ProxyPassReverse /datafariui http://XX.XX.XX.XX:3000/datafariui