Static Webapp Resources Locations and Best Practices

Introduction

Goal

Learn about the different locations for static webapp resources and when to use which location.

Background

The delivery web application in a Hippo implementation project typically uses static resources. Examples of static webapp resources are:

  • CSS stylesheets
  • Javascript files
  • Images
  • Font files
  • JSP templates
  • Freemarker templates

Hippo's delivery tier can serve static resources from two different locations:

  • In the site webapp in src/main/webapp.
  • In the content repository as Web Files (bootstrapped from the repository-data-webfiles module).

Typically both locations are used in a single project. The nature of each static resource as well as specific project requirements determine where it is located. This page provides some guidelines for best practices.

Note that files stored as assets in the content repository are user-managed and therefore considered dynamic, rather than static, resources.

Characteristics and Suitable Uses

The table below provides an overview of the characteristics of the two different locations, some guidance for suitables uses, and typical examples.

Location Characteristics Suitable Uses Example Uses
site webapp
  • Standard Java practice
  • Packaged with the site webapp
  • Updates require a release and redeployment of the webapp
  • Resources which are updated infrequently
  • Large resources (larger than the web files size limit)
  • JSP templates must be packaged with the site webapp
  • JSP templates
  • Images
  • Fonts
Web Files in content repository
  • Hippo-specific practice
  • Packaged with the cms webapp
  • Bootstrapped to the repository
  • Can be updated without need for redeployment of the webapp
  • Optimized for browser caching
  • Switch Template support for Freemarker templates
  • Automatic synchronization with file system in local development environment
  • Resources which are updated frequently
  • Small resources (smaller than the web files size limit)
  • Multiple alternative Freemarker templates for the same component (Switch Template)
  • Freemarker templates
  • CSS stylesheets
  • Javascript files

 

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?