Aurora /docs/webclient/index
index

Overview of the AURORA web-client

Main, Technical Buildup

The AURORA web-client has been written in Svelte using rollup for bundling the code for usability across older and newer browser versions.

The code base is located in the source code repo under the src-folder. The code starts in the main.js file which loads the index.svelte component.

The source code also contains several files that starts with underscore (“_“). These are mostly libraries and code that are reused across the client.

These are:

The index.svelte component handles the logon process and either redirects to a feide.cgi-script for FEIDE-authentication (OAuth) or logs on using the built-in AuroraID account.

After login, the code redirects to the Main.svelte-component which is the central “hub” for most of what is done in the application.

FEIDE-authentication is performed by the public/feide.cgi-script written in Perl. It runs on the web-server and converts the credentials it receives into a set of AURORA crumbs credentials that are forwarded to the AURORA web-client. In this way the credentials exposed to the user browser are only valid for AURORA and temporary in nature.

All the cookies are base64 encoded before they are stored or served to the application. The reason for this is that the feide.cgi perl-script did not handle having certain characters in the cookie values through the CGI-library and its cookie-routines. It then resulted in issues with the transport between it and the web-client application. The easiest solution was therefore to encode all cookies into and out of the browser seemlessly for the application. This makes reading cookie contents manually in the browser through the developer window a bit like reading ancient egyptian hieroglyphs before Champollion came along.

Component overview

Component use/imports

This is an overview of which components are used by a component and only consists of those that are main ones of the project itself. All _-libraries and svelte internal libraries have med removed from this overview.

How to develop

In order to start development of the code of this web-client, do the following:

  1. Create a folder where your AURORA web-client code/git repo resides.
  2. Populate the folder with the source code of the AURORA web-client git repo.
  3. Install all necessary dependencies as configured in the package.json-file by writing “npm install” and hitting enter.
  4. Move the public/settings.example-file to public/settings.yaml.
  5. Configure and setup the AURORA web-client by updating the public/settings.yaml file. See the installation-documentation in the AURORA-server code.
  6. Start the build and subsequent serving of the web-client by writing “npm run dev” and then hit enter.

After a while the screen should show that the bundle is available locally on “localhost:8080”. Point your browser to localhost:8080 to start using the compiled/bundled solution.

There also exists a development docker-set that can be used to run a complete AURORA environment and then allow the checking of code being developed in real-time. See the documentation of the AURORA REST-server for more information. This is the recommended way of developing the AURORA code, both for REST-server and the web-client. It is easy to setup and get to start using and easy to try out the complete AURORA codebase. We recommend however using a Linux OS when using this setup, although it should also work with some adjustments with a windows setup. This has however not been tested.

Build-up of the generated documentation

In the “generate”-folder of the svelte web-client you will also find a script called “generate.pl” which are able to generate the technical documentation of the AURORA REST-server located in public/docs/webclient/index.md (which you right now have the pleasure of reading). The script uses the files top.md, middle.md and bottom.md in addition to some quick analysis of the code to generate the documentation.

The generation does the following in this order:

  1. Writes the top.md file to the public/docs/webclient/index.md-file.
  2. Writes list of library modules and what they do to the index.md-file.
  3. Writes the middle.md file to the index.md-file.
  4. Writes the component overview and what they do to the index.md-file.
  5. Writes the import/use of application svelte components of each component to the index.md-file.
  6. Writes the bottom.md-file to the index.md-file.
For further questions, contact hjelp.ntnu.no