Presentium - Dashboard

This is the main frontend app for Presentium, available at app.presentium.ch. It is based on Nuxt UI Pro and Tailwind CSS.

Stack

• Typescript
• Nuxt 3
• Tailwind CSS
• Nuxt UI

Make sure to install the dependencies:

npm install

Development

Local Development Server

Start the development server on http://localhost:3000:

npm run dev

Development tips

Local environment variables

Make a copy of .env.example and name it .env. This file is ignored by git and should contain the environment variables that are specific to your local development environment.

Here are a description of the variables you can set. Note that defaults to get you up and running are already provided.

Variable	Description
NUXT_PUBLIC_SITE_URL	The public URL of the application, used for OIDC redirect URI.
API_URL	The URL of the API to use. Defaults to http://localhost:13000.
AUTH_OIDC_PROVIDER_AUTHORIZE_URL	The authorize endpoint of the OIDC provider
AUTH_OIDC_PROVIDER_TOKEN_URL	The token endpoint of the OIDC provider
AUTH_OIDC_PROVIDER_USERINFO_URL	The userinfo endpoint of the OIDC provider
AUTH_OIDC_PROVIDER_LOGOUT_URL	The logout endpoint of the OIDC provider
AUTH_OIDC_PROVIDER_ISSUER_URL	The jwt signer and issuer URL of the OIDC provider
AUTH_OIDC_PROVIDER_JWKS_URL	The jwt key signature endpoint of the OIDC provider
AUTH_OIDC_PROVIDER_CLIENT_ID	The client ID of the OIDC provider
AUTH_OIDC_PROVIDER_CLIENT_SECRET	The client secret of the OIDC provider
NUXT_OIDC_TOKEN_KEY	The token encryption key for storing JWT tokens on the server side
NUXT_OIDC_SESSION_SECRET	The HTTP session secret for the user session encryption
NUXT_OIDC_AUTH_SESSION_SECRET	The oauth session flow encryption key

Tip

In the .env.example file we have described in more depth how to configure the variable in your own development environment.

Running with the API

Most of the features of the dashboard require the API to be running. You can run the API locally by following the instructions in the API repository. When running in development mode, the API will also start a mock OIDC provider that will give you a couple of users you can use to log in with different roles.

Automated API client

We leverage nuxt-open-fetch to create a fully-typed, easy-to-use API client. This client is generated automatically from the OpenAPI schema of the API. To pull the local schema, make sure the API is running and run:

npm run fetch:api-docs

Continuous Delivery

We use Cloudflare Pages for automated continous delivery, which deploys preview environments for every commits on branches and pull requests. The details of the deployment should always be available in the checks of the commits.

The production branch is automatically deployed to the production environment, available at app.presentium.ch. To release a new version, there is a custom workflow that has a manual dispatch event that will release a version and trigger the deployment.

Contributing

Please refer to the Contributing Guide before making a pull request.