# 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 couch-auth (opens new window) (former superlogin), a library that handles users and databases for CouchDB (opens new window), the database backend used by AsTeRICS Grid.
  • .gitignore: file specifying which files to ignore by Git (opens new window) version control
  • .prettierrc: config for Prettier (opens new window) code formatter
  • babel.config.js: 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
  • 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). The version on this branch is the version that is delivered when opening https://grid.asterics.eu/ (opens new window).
  • crowdin.yml: configuration used by crowdin (opens new window) translation service
  • 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).
  • package.json: npm (opens new window) configuration file specifying dependencies and scripts for the AsTeRICS Grid project
  • README.md: markdown readme file for the GitHub project page
  • serviceWorker.js: Service Worker (opens new window) that manages offline capabilities of AsTeRICS Grid using Workbox (opens new window)
  • unsupported.html: static HTML file that is shown if AsTeRICS Grid is opened with an unsupported browser
  • webpack.config.js: webpack (opens new window) configuration file specifying options for building and bundling the application
  • yarn.lock: file generated by yarn (opens new window) specifying the exact version of dependencies used in the project

# 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 service modules providing specific functionalities, like accessing the database or performing grid element 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
    • mainScript.js: entry 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.
  • vue-components/: folder containing all Vue.js (opens new window) single-file 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 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 in index.html. The custom ones could also be put into src/css/ and bundled with webpack.
  • dictionaries/: predictionary (opens new window) dictionaries including the most frequently used words of different languages. Dictionaries can be imported in the manage dictionaries view.
  • fonts/: folder containing custom fonts that can be used for element labels or PDF exports
  • img/: folder containing images and icons
  • lang/: translations files, managed by crowdin (opens new window) - only directly alter i18n.en.json
  • lib/: folder containing various javascript libraries, which are not imported using npm (opens new window).
  • 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 (archived).
  • index.html: starting point of the application, basic html including all bundled javascript resources and libraries.
  • manifest.webmanifest: Web App Manifest (opens new window) file containing information about the app and making it usable as progressive web app (PWA), e.g. using and installing it in an app-like fashion on smartphones.
  • privacy_[de/en].html: static html files including privacy statements in English and German

Next Chapter →

Back to Overview