The new datafari UI based on react requires a few additional steps and configurations to be built and used within Datafari. This page aims at providing those elementsReact 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 /datafariuiinto 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 :
| Code Block |
|---|
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).
...
Build and configure for production
| Info |
|---|
The next steps are for a local build installing all the dependencies into your local server. note that a Dockerfile is present at the root of the project to easily compile the source code without installing any dependencies. The package after the build is present into “ |
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:
| Code Block |
|---|
npm install |
Build the production ready package
...
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:
...
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:
| Code Block |
|---|
cp -R build /opt/datafari/www |
...
| Info |
|---|
Assuming the production build of datafariUI has been copied to |
It is necessary to add some elements to the tomcat.conf apache configuration file that is shipped with datafari to serve datafariUI.
...
| Code Block |
|---|
Alias /datafariui /opt/datafari/www/ <Directory "/opt/datafari/www"> Require all granted Options -MultiViews RewriteEngine On RewriteBase "/datafariui/" RewriteCond %{REQUEST_FILENAME} !-f RewriteRule "^/datafariui/ /datafariui/" "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
...
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:
...
This will start a development serer server 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:
the app is expected to be deployed at
/datafariuiand it is most likely been deployed at the root of the dev server i.e.Datafari’s APIs won’t be available as datafariui expects Datafari to be deployed on the same domain at the
/Datafaripath and it is not the case right now
Those are addressed in the following section
...