Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:

  1. Include the necessary scripts and css into the page

  2. 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):

...

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
namehosting-multiple-react-applications-on-the.pdf
to redefine the name of the webpack runtime for one of the application and you should be good to go.