Search code examples
apacheamazon-web-servicescustomizationamazon-emrapache-zeppelin

How to change the Apache Zeppelin UI appearance and make edits to elements


I'm currently running Apache Zeppelin 0.7.2 on an AWS EMR machine. Is there any way to replace the zeppelin logo and words at the top with any other text and images?

I tried to use the Inspect Elements feature in Chrome on the Zeppelin Webpage and tracked down the image location, which is being loaded from: /var/run/zeppelin/webapps/webapp/assets/images/zepLogoW.png

I tried to replace the above image file with the target image and made changes to the navbar.html to change the zeppelin word at the top left navigation bar. However, even after making these changes when I restart the Zeppelin service using : sudo stop zeppelin sudo start zeppelin

The changes don't reflect in the browser even after refreshing. Is there any way to make such changes reflect in the browser and persist as well. Thanks in advance!


Solution

  • Zeppelin uses Jetty which explodes a .war file to produce the web root directory. Whenever the server is started the war is exploded and the web root is overriden, so changes made to that directory won't survive a service restart.

    You can either edit the zeppelin-web code and compile the module to create your own war file you can replace the original with (in EMR it is located at /usr/lib/zeppelin/zeppelin-web-0.x.x.war), or you can replace the logo file and make source edits to the exploded files and they should be served fine (should probably clear browser cache) but will disappear as soon as the Zeppelin service restarts.