README.md

dashboard

The web UI component of the AuRa framework

Setup

Prerequisites

This version is an early development prototype.

Detailed setup infos will follow, as soon as we reach something between alpha and beta stage.

For dashboard to run locally or to deploy it to some web space, you need Node.js and the Node Package Manager (npm), which comes with Node.js. You have different download options for Node.js depending on your operating system. You need at least Node.js v14.

Configuration

All global configuration settings of the dashboard application can be set in the corresponding .env.* files. You can use different settings for a development and a production environment. So for a production environment you will have to set all values in .env.production. For development use .env.development. For more infos on environment variables, also for test and staging modes, see Vue CLI 3: Environment Variables and Modes

This repository already provides sample environments in the files sample.env.development and sample.env.production, so you can copy them to .env.development and .env.production depending on wheter you want to set up a dev or prod environment.

All needed values are provided with comments in the sample.env.production file, so you can just take a look there and create your copy for the development environment. There are some important notes on what to set and what to not forget. For developers: Also be aware that these settings become environment variables once compiled by Vue.js, so hot reload does not work, when you change them. You have to compile the app again for changes to take effect.

For the OpenID Connect settings it is very important to use exactly the same redirect URIs as defined in you OIDC client settings in the aura/steering module. So VUE_APP_API_STEERING_OIDC_REDIRECT_URI and VUE_APP_API_STEERING_OIDC_REDIRECT_URI_SILENT should ideally be a copy-paste from there.

For further information, check out the detailed documentation on OIDC configuration.

Running it locally (development environment)

After you have set up the environment you first need to install the required packages:

npm install

And start the development server:

./run.sh

For customizing the whole Vue CLI development environment, see Configuration Reference.

Setting it up on a server (production environment)

Before building the final client code, you have to copy the sample.env.production file to .env.production and change the values to your final setup, as described in the Configuration section above.

Similar to the dev environment you first have to install all dependencies by npm install. Then you can build the production code, use npm run build. This compiles and minifies the code for production. Then you just have to put the contents of the dist folder on some web space. From a web server's perspective this is just static code, so nothing special is needed except a plain web server (using HTTPS with Let's Encrypt or any other TLS certificates is highly recommended).

TODO: provide an example setup

Building/running with Docker

You can use Docker either to run the local development server, if you do not want to set up node/npm on your host, or you can use Docker to just build the dist directory, that you then use in your dashboard's web root.

Before you build any image and run containers, make sure you followed the steps above in the Configuration section.

To create the image for the dev container and run it use the following:

docker build -t dashboard-dev --target=dev .
docker run --rm -it -v $(pwd):/aura -p 8080:8080 dashboard-dev

To use the build image to build the dist directory do the following:

docker build -t dashboard --target=prod .
docker run --rm -it -v "$(pwd)"/dist_docker:/aura/dist_docker dashboard \
  sh -c 'npm run build && mv dist/* dist_docker'