# Structure

This chapter is about the general structure of the AsTeRICS Grid project:

  1. Project structure
  2. Sources structure

Back to Overview

# Project structure

The AsTeRICS Grid project is hosted on GitHub (opens new window). These are the main folders and files in the project:

  • app/: folder containing static and built resources for the actual AsTeRICS Grid application. Host this folder in addition to ../index.html in the root folder on webserver in order to and open the ../index.html file in order to start AsTeRICS Grid.
  • docs/: folder containing various documentation resources, e.g. this manual
  • scripts/: folder containing shell scripts, e.g. for releasing a new AsTeRICS Grid release
  • src/: folder containing Javascript sources
  • superlogin/: folder containing configuration of superlogin (opens new window), a tool that handles users and databases for CouchDB (opens new window), the database backend used by AsTeRICS Grid.
  • .babelrc: configuration for Babel (opens new window) Javascript compiler, only needed for running Jest (opens new window) tests, other Babel configuration is found in webpack.config.js
  • .gitignore: file specifying which files to ignore by Git (opens new window) version control
  • CNAME: configuration file of GitHub, specifying which alternative domain points to the version that is found on the GitHub gh-pages branch (opens new window). Therefore the version found on this branch is the version that is delivered when opening https://grid.asterics.eu/ (opens new window).
  • index.html: entry point of the application, uses resources from the app/ folder
  • LICENSE: file specifying the license of AsTeRICS Grid which is AGPL3 (opens new window).
  • README.md: markdown readme file for the GitHub project page
  • package.json: npm (opens new window) configuration file specifying dependencies and scripts for the AsTeRICS Grid project
  • package-lock.json: file generated by npm (opens new window) specifying the exact version of dependencies used in the project
  • webpack.config.js: webpack (opens new window) configuration file specifying options for building and bundling the application

# Sources structure

All custom sources are located in the src folder which has the following structure:

  • css/: includes custom stylesheets
  • js/: all pure Javascript sources
    • externals/: folder including ES6 module wrapppers of libraries that are included externally within a <script> tag in index.html. Wrapper is needed in order to make the libraries test- and mockable with Jest (opens new window).
    • input/: folder containing modules implementing various input options like hovering or scanning
    • model/: definitions of data model classes using ObjectModel (opens new window)
    • service/: all kind of modules providing a functionality that is related to AsTeRICS Grid’s functionality, access the database or performing actions
    • util/: all modules providing any general functionality that is needed by other modules or services
    • vue/: all Vue.js (opens new window) related modules, not including vue components
    • grid.js: module that creates dynamic grids (UI) out of the saved data in the database and provides interaction possibilities with the grid
    • mainScript.js: starting point of the whole application
    • router.js: module that does routing to different views based on the current hash of the URL, e.g. #main, #login or #grids. Uses the Navigo (opens new window) library.
    • templates.js: module that holds HTML templates which are used for generating the HTML sources for various grid elements
  • vue-components/: folder containing all Vue.js (opens new window) components
    • components/: folder for general purpose components
    • modals/: folder for modal (popup) components
    • views/: folder for view components, see all kinds of views in the user documentation

# Elements in folder “app/”

Besides the custom sources in the src/ folder the app/ folder contains these elements which in total realize the working AsTeRICS Grid application:

  • build/: folder containing a built and minified file of all sources that are included in the src/ folder. For bundling webpack (opens new window) is used.
  • css/: global stylesheets which are directly included index.html. There is no specific reason for not putting them into src/css/ and let them also be bundled with webpack to the bundle in build/.
  • dictionaries/: lz-string (opens new window) compressed predictionary (opens new window) dictionaries including the most frequently used words of different languages. The dictionary fitting the user’s language preferences is automatically imported on creating a new user and visible in the manage dictionaries view.
  • examples/: folder containing example grid-sets. The gridset default_[language_code].grd is automatically imported on creating a new user.
  • img/: folder containing images and icons
  • lib/: folder containing various javascript libraries, which are not imported using npm (opens new window).
  • polyfill/: folder containing polyfills which are used in order to bring newer language features to older browsers
  • simple/: folder containing a simple version of AsTeRICS Grid which only shows simple buttons which can trigger ARE actions defined in a gridset (.grd) file.
  • index.html: starting point of the application, basic html including all bundled javascript resources and libraries.
  • manifest.appcache: AppCache (opens new window) manifest file including all resources to cache for offline usage
  • manifest.webmanifest: Web App Manifest (opens new window) file containing information about the app and making it usable as progressive web app, e.g. using and installing it in an app-like fashion on smartphones.

Next Chapter →

Back to Overview