image-frontend

A base Angewandte project

Image is an open-source application offering the possibility for managing an image database of high quality images enriched with curated metadata. It is developed and maintained by the base dev team at the University of Applied Arts Vienna.

The application was created as part of the project „image+ - Platform for Open Art Education“, an interdisciplinary cooperation between several Austrian institutions and universities with the goal to ease the access to high quality art images and image metadata for art education teachers.

Image Frontend is a browser-based user interface for this application, written in JavaScript and utilizing the Vue and Nuxt frameworks. Also base Angewandte Frontend applications are built on top of a common set of components: base-ui-components.

The backend code of this project can be found at github.com/base-angewandte/image-backend.

Project Setup

git and npm is required on your system

# clone the git repository
git clone https://github.com/base-angewandte/image-frontend.git

Install node dependencies

# switch into the project folder
cd image-frontend

# install dependencies
npm install

Also check and if necessary, adapt the configuration:

# a copy of .env-skel was created automatically on npm install
# use your favourite text editor to inspect and adapt the config file 
nano .env

# a copy of config/settings-skel.js was created automatically on npm install
# edit the settings before starting the project
nano config/settings.js

For configuration details and possible options see the config section.

Production Setup

git and docker are required on the system.

# build and start the App
make start

Configuration of the App

The configuration of your project can be done with environment variables specified in a .env file.

Configurable values:

The following variables in the .env file contained in project folder can be defined and must be available:

Variable	Description
APP_TITLE	name of the app, used to set title tag
APP_BASE_URL	url where the Frontend is located (if you are using the local image-backend for development, use 127.0.0.1 instead of localhost)
NUXT_ENV_APP_PREFIX	desired prefix of the application
API_SPEC_URL	url to the open-api-definition in json format (if you are using the local image-backend for development, use 127.0.0.1 instead of localhost)
BACKEND_BASE_URL	url where the backend is located (e.g for login/logout) (if you are using the local image-backend for development, use 127.0.0.1 instead of localhost)
BACKEND_PREFIX	prefix for the backend
HEADER_JSON	url where the latest header version is specified
HEADER_LOGOUT_REDIRECT_URL	url to redirect after logout
HEADER_URLS_TERMS	link to terms and conditions
HEADER_URLS_NOTICE	link to site legal notice
LOCALES	available locales
DEFAULT_LOCALE	default language, if one should be set (else the browser language will be used)
NUXT_ENV_EN_TITLE_CASING	as per default with locale set to english, all text except complete sentences will be title-cased. Set false to turn this behaviour off.
AUTH_REQUIRED	set true for users to be redirected to login page if not authenticated
XSRF_COOKIE_NAME	set csrf token name
BASE_UI_ICONS	url to icons spriteSheet (base-ui-icons.svg)
DEFAULT_ALBUM_IMAGE	url to image/icon (placeholder for albums without artworks added)
DEFAULT_DISPLAY_FOLDERS	default render mode for folders/albums - can be changed by user action. possible values: list grid
DEFAULT_DISPLAY_IMAGES	default render mode for images in search and album edit view (slides) - can be changed by user action. possible values: crop: use image as box cover, resize: fit complete image into the box
SEARCH_ROWS_PER_PAGE	define how many search results rows should be shown per page on main artworks search page
MAIN_AUTOCOMPLETE_RESULTS	define how many autocomplete results should be fetched per category in main search
SEARCH_ARTWORKS_AUTOCOMPLETE_FILTERS	define an array with the filter id's of filters that should appear in main search autocomplete. If left empty all filters that have autocomplete will be used
ARTWORKS_META_DATA	set an ordered list of artwork meta-data keys to display in the artwork details view. Meta tags wrapped in an additional array are rendered as columns.
ARTWORKS_META_DATA_INFOBOX	set an ordered list of artwork meta-data keys to display in the artwork info box. Meta tags wrapped in an additional array are rendered as columns.
ARTWORKS_META_DATA_APPLY_DISCRIMINATORY_FILTER	set an list of artwork meta-data keys which should be searched for discriminatory terms, and discriminatory terms filtering should be applied
ARTWORKS_META_DATA_APPLY_LINK_PARSING	set an list of artwork meta-data keys which should be parsed for link urls and should render a clickable link if found
ARTWORKS_META_DATA_PRESERVE_WHITESPACES	set an list of artwork meta-data keys for which white spaces entered in admin should be preserved.

Following .env variable get updated during project start up - so no need to set up!

Variable	Description
HEADER	complete header url (can also be set manually via gulp set-header)

Development

This project uses conventional commits. More detailed information and documentation is available here.

Npm scripts

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# start the production preview server
npm run preview

# start the production server
npm run start

# run linter on project files
npm run lint

# run linter on project files with autofix enabled
npm run lint:fix

# create a new changelog version
npm run changelog

# update changelog and update Makefile version (for docker-registry build)
npm run release:update

# commit new version, merge to master and push to repositories
npm run release:commit

# commit new version, merge to master, push to repositories, create docker container and push it to dockerhub
npm run release

# in case header is not working you might need to set the header component url via
gulp set-header

Workflow for releasing a new version

Since we want to manually modify the changelog after creation we need to do the following steps:

1. update the version number in package.json manually.
2. run the npm run release:update script.
   This will create the changelog.
3. Modify the changelog if necessary.
4. run npm run release.
   This will:

• commit all changes made to package.json, package-lock.json, CHANGELOG.md and Makefile
• create a version tag
• merge the release/{newVersion} branch or (if that does not exist) the develop branch to master
• push commits to the repositories.