userinterface

User Interface for DMT Clearinghouse (DMTC).

The DMTC interface is a single-page web application developed using Vue 3 and designed to be hosted by an Apache web server.

Required components to build and test the web application on a local development system include:

• Docker - to run a local Apache container that can serve the devel, testing, or master (production) branches of the repository
• Node.js - to provide the local toolchain for developing and building the app using NPM and the Vue CLI
• NPM (typically installed with Node.js) - for installing the module dependencies and building the production app code
• Vue CLI - for bootstrapping the development of a new Vue app if needed

The module dependencies for the application are not included in the repository due to size requirements and should be installed in the local build/development environment by changing into the ui directory, and executing the npm install command.

For interactive development and previewing of updates, the npm run serve command can be run from the ui directory. Saved changes to the application source code will be reflected in the locally running instance of the application interface at localhost:8080 in a web browser.

Following successful installation of the application dependencies the production code for the application can be generated by changing into the ui directory and executing the npm run build command.

The three provided shell scripts:

rebuild-restart-devel.sh, rebuild-restart-testing.sh, and rebuild-restart-production.sh automate the process of checking out the appropriate repository branch, stopping (if running) the corresponding apache web server (devel, testing, or production), removing and rebuilding the corresponding Docker image, and restarting the corresponding Docker container. When these commands are executed the running containers and associated user interface can be accessed at:

• devel - localhost:8082
• testing - localhost:8081
• production - localhost:80