...
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
...
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 | ||
|---|---|---|
|