Skip to content

Introduction

Open a terminal and type photoprism start to start the built-in server. It will listen on localhost:2342 by default, see compose.yaml and Configuration.

Frameworks

Vuetify is a powerful open-source Material Design UI component framework for building modern single-page applications.

It is based on VueJS, a JavaScript library that combines the best ideas from AngularJS (Google) and React (Facebook); development is community driven and the API fairly stable.

Vuetify and VueJS are initialized in frontend/src/app.js. Webpack is used as a module loader / bundler. It creates single, optimized JS and CSS files in the server assets public build directory from the original source code. You can find the build configuration in frontend/webpack.config.js.

For our docs and landing pages, we may use https://materializecss.com/ as a lightweight alternative to Vuetify.

Components

Components are reusable user-interface widgets. UI Components contains a list of custom components. Standard components like buttons or forms are well documented on vuetifyjs.com.

Dependencies

The full list of dependencies can be found in frontend/package.json. You need to run npm install in the frontend directory to install them (automatically happens during installation, see Makefile). Run npm install -P [package name] to add a new package (library or framework).

Building

A build can be triggered by running npm run watch (watches for changes and re-builds when needed) or npm run build (single build) in the frontend directory. NPM is the default package manager that comes with NodeJS, a JavaScript run-time environment that executes JavaScript code outside of a browser.

External Resources