Frontend App of the SLS Digital Edition Platform

digital-edition-frontend-ng is the frontend application of the SLS platform for building digital edition web apps. It supports features typically found in digital scholarly editions, like reading texts, manuscripts, facsimiles and commentaries in parallell views, as well as media collection libraries, indices of named entities and keywords, and an integrated EPUB-viewer.

Internationalization and server-side rendering are supported out of the box, meaning that your web app will be fully indexable by search engines and readable by AI bots. The frontend app utilizes a responsive design and works on both desktop and mobile devices. Many features of the user interface are easily configurable, and theming is straightforward.

Examples of digital editions employing this frontend app include:

• Zacharias Topelius Skrifter
• Historiska recept
• Leo Mechelin – Pro lege

The app is built on Angular and uses Ionic web components.

 

---

Changelog

Learn about the latest improvements.

Setting Up a Project

1. Create a fork of digital-edition-frontend-ng. Only include the main branch.

2. Rename the default branch of the forked repository base, shared or something similar.

3. Create a new branch in the forked repository and name it production, prod or something similar.

4. Configure your project app by editing /src/assets/config/config.ts. Documentation on the configuration options is forthcoming.

The base branch of the forked repository must never be manually modified. It must be kept as a clone of the original ”upstream” main branch in digital-edition-frontend-ng. When the upstream main branch is updated, you can sync the updates to the base branch in your forked repository. You can then merge the base branch into your production branch.

This workflow enables updates to the app in the original, upstream repository to be easily distributed to forked project repositories.

By default, the app has Swedish and Finnish language versions enabled. See the documentation (forthcoming) on how to configure internationalization, customize your app, build it for production and deploy it.

Documentation

• Updating, building and deployment.
• Development notes.

Development Setup

Prerequisites

1. Install Node.js which includes npm. The app is compatible with Node ^18.19.1, ^20.11.1 and ^22.0.0. The app is currently configured to run on Node 20. Check your Node version with:

Node --version

2. Install the Angular CLI globally:

npm install -g @angular/cli

3. Clone the repository locally and cd into the folder. On Windows you can use GitHub Desktop or Git Bash (see tutorial on Git Bash).

4. Install dependencies:

npm install

Running locally

Development Server

To build and serve the application on a development server as a client-side app only, run:

npm run start

Open your browser on http://localhost:4200/. The app will automatically rebuild and reload if you change any of the source files.

Server-Side Rendered App

To build the server-side rendered application, run:

npm run build:ssr

Then, to serve the app, run:

npm run serve:ssr

Open your browser on http://localhost:4201/. You need to manually run the build and serve commands again for changes in the source files to take effect.

Earlier version

digital-edition-frontend-ng is an updated version of digital_edition_web, which is an outdated Ionic 3 / Angular 5 frontend app.

About the SLS Digital Edition Platform

The platform consists of an Angular frontend app, a Flask-driven REST API, a backend search app run by the Elastic (ELK) Stack, a template for a backend files repository and a database template. There is also a tool for creating commentaries to texts in TEI-XML format.