Use Custom Static Files (JS, CSS) in a Webapp

In addition to the the JavaScript or CSS you type in your webapp, you may want to use libraries. DSS comes with some embedded standard JS libraries (jQuery, boostrap, etc), go to the “Settings” tab of the webapp editor to activate them.

If the library you are looking for is not available in DSS, a quick way to load it, if your library is already hosted, is to simply link from your HTML:

<script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script>

DSS also has a “static” folder where you can place static content (JavaScript, CSS, images) that will be served by DSS and available to your webapps. There are two ways to move files to that folder. Using the web interface or using the command line.

Import libraries using the graphical interface

If you have admin rights on your DSS instance, you can click on the cog icon the top-right corner and select “Edit local/static contents”.

../../../_images/menu.png

In the libraries editor, you can either create and edit files within DSS, or upload your files.

../../../_images/editor.png

Import libraries using the command line

If you have many files to imports, you may want to use the command line, here is how:

  1. Go to the DSS Data Directory

  2. Check for the presence of a local/static directory. Create it if needed: inside a terminal, enter

    mkdir -p local/static

  3. Copy your static files into this directory. For instance, you might copy your team’s CSS and Javascript common files.

Using static files in your webapp

Once they are in you can now use the static files from the HTML code of your webapp as in the following example (Not that there is a ‘/’ before “local”)

<script type="text/javascript" src="/local/static/my-team.js" />
<link rel="stylesheet" href="/local/static/my-team.css" />
<img src="/local/static/my-image.jpg" />

That’s it! You can now use your favorite Javascript or CSS libs in DSS!

A word of explanation: this works thanks to DATA_DIR/nginx/conf/nginx.conf, which maps /local/static/ to dss-data-dir/local/static/.