howto

Use custom static files (JS, CSS) in a web app

May 24, 2017

In addition to the the JavaScript or CSS you type in your web app, you may want to use libraries. DSS comes with some embedded standard JS libraries (jQuery, boostrap, etc), go to the “Settings” tab of the web app 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 web apps. 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”.

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

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 web app

Once they are in You can now use the static files from the HTML code of your web app 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/.