Prez UI is the front end of Prez - a linked data API.
Prez UI is a Vue.js single page application (SPA) that uses N3.js to process RDF data from the Prez API.
See the Prez UI demo website - https://rdflib.dev/prez-ui/
Configuring an instance of Prez UI is done by supplying environment variables.
Vite automatically imports environment variables from .env*
files with a preference order (see Vite Env Variables and Modes), where .env.[mode].local
will be preferenced over .env.[mode]
files for example, where [mode]
would be development
, production
, etc. For convenience for local development, it is recommended to create a .env.development.local
file to set your local environment variables.
See .env
for the default values for the available environment variables. Note that environment variables must be prefixed with VITE_
.
Prez UI instances can be themed by providing header & footer HTML files, as well as custom CSS styling. After building your instance of Prez UI (before which your environment variables must be set):
npm install
npm run build
copy your files into the dist/theme/
directory, overriding existing files when necessary. See the public/theme/
folder for the required files:
favicon.ico
header.html
footer.html
theme.css
These files should be left blank if not being used.
The public/style.css
CSS file contains CSS variables that can be overridden in your theme.css
file for easy theming.
Prez UI can be deployed as a Docker container, which contains an NGINX server serving static files. To theme your Docker container, create a volume at /app/theme
called theme/
containing the theming files, e.g.:
docker run -v <YOUR_THEME_FOLDER>:/app/theme rdflib/prez-ui
To enable SSL for a Docker container deployment, supply your own nginx.conf
file containing the commented-out lines for SSL in the supplied nginx.conf
file in a Docker volume (yet to be implemented).
Visual Studio Code is the recommended IDE for development on Prez UI because of its intellisense with TypeScript. These extensions are highly recomended:
- Vue Language Features (Volar)
- TypeScript Vue Plugin (Volar)
- Make sure to enable takeover mode
Nice-to-haves: