...
In our example, our webapp is hosted at /otherfolder and we decided to host DatafariUI on a page under /otherfolder/testdatafariui .
2- Prepare DatafariUI for the build
...
So do a git clone of the project to download the source code.
| Info |
|---|
Note: the actual project is on our gitlab (and is publicly available as well: https://gitlab.datafari.com/datafari-community/DatafariUI ), the github version is a mirror, so you can use either. |
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).
...
| Code Block |
|---|
PUBLIC_URL=/otherfolder/testdatafariui |
The Then open the src/index.js file, we you must change the window.datafariBaseURLto match the URL of our your Datafari instance (my datafari instance is hosted at 192.168.1.20 with the default settings resulting in the address https://192.168.1.20/Datafari to access it):
...
The application is now ready to be built.
3- Building the app and copying the required files
...
You need to copy the folders images, locales and static from this build folder so that they can be accessed from the previously chosen root path for DatafariUI, in my case:To build the production ready version of the app go to root folder of the project and run:
| Code Block |
|---|
scp -r build/images build/locales build/static myuser@myserver:/var/www/html/testdatafariui |
...
You will need to perform two things:
Include the necessary scripts and css into the page
Add a div with the id “root” to your page
Including required scripts and css
Open the index.html file from the build folder (build/index.html) of the datafariui project (the file content is written on one line, you can reformat it to help you copy the required elements). From there, identify and copy the 3 scripts elements at the end of the body and add them to the end of the body of your page. They should look something like the following:
...
For reference, here is look at my html page, which is /var/www/html/testdatafariui/index.html html in my case (I integrated DatafariUI into the default index page of the ubuntu installation of apache2 here, and enlarged the main div to 90% of the width of the page to have a proper render of the UI):
...
The installation is now finished and you should be able to access DatafariUI from the page hosting it:
...
...
Advanced usage 1: Modifying the id required for the div
Before building the datafariui project, you can edit the src/index.js file. Within it there is this block of code:
...
Change root to the id you want to use for the div and follow the rest of the procedure.
...
Advanced usage 2: The page hosting DatafariUI is a react app or it uses the WebPack runtime
DatafariUI is bootstrapped using create-react-app. The app is using the webpack runtime with the default configuration. If your application does the same, there will be a clash of names and only one application will be able to load on the page at any given time. To fix that, follow the information of this blog post: https://medium.jonasbandi.net/hosting-multiple-react-applications-on-the-same-document-c887df1a1fcd
| View file | ||
|---|---|---|
|