VTDLP Access Website

A Multi-Tenant Serverless Website built with GraphQL, React, AWS Amplify, AWS AppSync, DynamoDB, Amazon Cognito and OpenSearch. This project is part of the Virginia Tech Digital Library Platform (VTDLP). We used this software to host several Virginia Tech University Libraries digital collections, see showcase below.

We also have a Live Demo site.

Project Showcase

• HOKIES@HOME
• International Archive of Women in Architecture (IAWA)
• Southwest Virginia Digital Archive

Features

• Full-text search and configurable faceted search
• Supports multiple viewers
  • HTML5 audio, video, and image player
  • Kaltura video player
  • Mirador viewer
  • PDF viewer
  • x3dom viewer
• Submission Information Packet, SIP -The submission information package is provided to the Virginia Tech Digital Library Platform and will be used for the AIP,
  Archival Information Package (AIP). The format, requirements, metadata, etc. of the SIP is listed in the link below. The content provided to the VT-DLP must meet the requirements as established by the Virginia Tech Digital Library and detailed in the Virginia Tech Digital Library Preservation Plan.
• Metadata management
  • Collection creation and editing
  • Item creation and editing
• Configurable Home page and menus
  • Cover image
  • Featured items
  • Welcome statement
  • Sponsors section
  • Collection highlights
  • Contact information
  • Media Section
  • Google Analytics

Screens

Software Stack

• AppSync: We use AppSync to handle the communication with backend DynamoDB and OpenSearch. Please see the initial examples. This file elaborates all the operations currently in use.
• AWS Amplify: We use Amplify to handle the authentication and authorization and connect to the backend AWS services.
• DynamoDB: We use DynamoDB tables to store all the metadata.
• AWS OpenSearch: We use OpenSearch to enable full-text and faceted search.
• AWS Cognito: We use AWS Cognito to handle the authentication, authorization, and group permission.
• IIIF Images: We use aws-batch-iiif-generator to generate IIIF tiles and manifest in AWS.

Launching the app

Deploy the app using AWS CLI

• Create a branch with a backend environment

aws amplify create-branch --app-id=AmplifyAppId --branch-name=GitHubBranchName --backend-environment-arn=BackendEnvARN

• Deploy the app

aws amplify start-job --app-id=AmplifyAppId --branch-name=GitHubBranchName --job-type=RELEASE

• Get Backend Environment Arn

aws amplify list-backend-environments --app-id=AmplifyAppId

Run locally with the Amplify CLI

0. Prerequisites

npm install -g @aws-amplify/cli
brew install yarn

1. Clone the repo

git clone [email protected]:VTUL/dlp-access.git

2. Change into the directory & install dependencies

cd dlp-access
npm install

3. Initialize the Amplify backend

amplify init

4. Push the application into your account

amplify push

• Default group: public

Amplify Environment variables

We assign each site with a unique REACT_APP_REP_TYPE.

As an example, the site of IAWA takes these settings below:

REACT_APP_REP_TYPE=IAWA

The site of Demo takes these settings below:

REACT_APP_REP_TYPE=Default

More Environment variables

Variable	Description
REACT_APP_MINT_LINK	Mint service API URL
REACT_APP_MINT_API_KEY	Mint service API key
USER_DISABLE_TESTS	Enable/disable Amplify tests

If deploying an instance of the Podcast Repository he site must be able to authenticate itself with the NOID minting servicein order to support creating Podcast episode records through the site admin interface. So two additional environment variables are required. The values to be assigned to these variables can be found in the AWS API Gateway console.

REACT_APP_REP_TYPE=podcasts
REACT_APP_MINT_LINK=https://<api id here>.execute-api.us-east-1.amazonaws.com/Prod/mint
REACT_APP_MINT_API_KEY=<your api key here>

Amplify Build settings

• Use amplify.yml for version after v1.3.2

Site custom images and HTML files

We put custom static images (e.g., site cover image) and HTML files (e.g, about page) in a S3 bucket with Cloudfront setup.

See instruction and various site content examples below:

• Instruction
• html exampes
• images exampes
• Demo site configuration: examples/default.json.

Running the tests

• An end-to-end testing framework using Cypress.io has been setup for this project.

• To test locally

  0. Put your configuration json files to a S3 bucket and enable CORS and make the config file public.
  1. Start local server using REACT_APP_REP_TYPE=Default npm start
  2. Launch the Cypress app CYPRESS_password=<secret> CYPRESS_userPoolId=<your user pool Id> CYPRESS_clientId=<your user pool client Id> yarn run cypress open Note: Environment varibles in the above command beginning with CYPRESS_ must be updated with your actual account values
  • The username for authentication is: devtest. You can create this devtest account through account creation page.
  • You can create your own testing account and password, and update the username. E.g., an example here

Cleanup

If you'd like to tear down the project & delete all of the resources created by this project, you can run the following:

amplify delete

Documentation

• See Wiki for more information. We are keeping update!

Communication

• GitHub issues: bug reports, feature requests, install issues, thoughts, etc.
• Email: [email protected]

Releases and Contributing

We have a 30 day release cycle (We do Sprints!). Please let us know if you encounter a bug by filing an issue. We appreciate all contributions.

If you are planning to contribute back bug-fixes, please do so without any further discussion.

If you plan to contribute new features, utility functions or extensions to the core, please first open an issue and discuss the feature with us.

To learn more about making a contribution, please see our Contribution page.

The Team

DLP Access Website is currently maintained by Lee Hunter, Yangkai Lin, and Astha Dhakal.