Skip to content

skilltech.tools

The repository propose to use docker to quickly setup a dev environment. First clone the git repository then cd into it.

DNS configuration (dev only)

You may access the skilltech.tools app on localhost (127.0.0.1) but you will probably need a domain name to make it work with an OIDC server. This server will redirect your browser to an defined address that nust match the one used by the skilltech.tools application. For example if your app use the skilltech.tools domain name, add this in your local host file:

127.0.0.1       skilltech.tools

Then when you enter https://skilltech.tools in your browser address bar you will see your local running application.

Spin the containers

There is three docker profiles you can use to run the appropriate containers: dev, prod, build

docker compose --profile dev up

The build and prod profiles will generate files of the Vue app into the /app/dist folder, ready for the production.

Preparing the database

First you need to create the tables into the database using this command:

docker exec -ti skilltechtools-mariadb-1 sh -c "mariadb -u root -prootpassword tools < /sql/tables.sql"

Then add the default applications:

docker exec -ti skilltechtools-mariadb-1 sh -c "mariadb -u root -prootpassword tools < /sql/apps.sql"

PHP dependencies and OIDC configuration

This app needs an OIDC server to authenticate users. To configure the identity provider, copy the file /php/config.sample.php to /php/config.php with appropriate values.

We use a PHP library to manage the OIDC connection. You must install it using the Composer dependency manager. If you don't have it installed on your computer you can install it in a container. To do so, ppen a bash shell in the PHP dev container (it must be running):

docker exec -ti skilltechtools-php-dev-1 bash

Then install composer and the project dependencies

apt update && apt install unzip
curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
cd /usr/share/nginx && composer install

Adding a new App on Skilltech Tools

First, the new app must be configured on your Authentik server. We consider that your new application slug is "shinyapp" for the next examples.

Insert in database

Open the mariadb console:

docker exec -ti skilltechtools-mariadb-1 mariadb -u root -prootpassword tools

Then add a new entry in the database using the slug and URL of the application:

INSERT INTO app(slug, url, category, activities, formats) VALUES("shinyapp", "https://shinyapp.skilltech.tools", 0, "creation", "text graphic");
  • category can be either 0, 1 or 2 for respectively Curated, Hosted or Developed
  • activities is a string of space separated keywords from this list : creation, communication, library, presentation, sharing
  • format is a string of space separated keywords from this list : audio, course, data, graphic, multimedia, photo, text, video, web

Add app files

All app related files are in the /app/public/app/shinyapp folder (you need to create it). These files are fetched dynamically: you don't need to rebuild the Vue app after a modification.

The localization file is named "messages.js". It is important to strictly follow the JSON format. The easiest solution is to copy-paste another message.json file and to modify it. The structure of the file is like this:

{
  "en": {
    "name": "Shiny App",
    "about_me": "I am an example app.",
    "how_connect": "Just use this file as an example",
    "project_url": "https://example.com",
    "alternative_to": "Foo, Bar"
  },
  "fr": {
    "name": "Shiny App",
    "about_me": "Je suis une application servant d'example.",
    "how_connect": "Je suis la meilleure référence pour cette application",
    "project_url": "https://example.com",
    "alternative_to": "Foo, Bar"
  }
}

You can add screenshots and icons in the same folder using the right name.

  • the rectangular picture of the app is pic.svg
  • the square icon of the app as icon.svg
  • the screenshots are screen1.png and screen2.png

Removing an app from Skilltech tools

  • Remove the app from the database (it is already enought to hide it from the interface):

    DELETE favorite FROM favorite LEFT JOIN app ON app.id = favorite.app_id WHERE app.slug="shinyapp"; DELETE FROM app WHERE slug="shinyapp";

  • Remove the /app/public/app/shinyapp folder

  • Remove it from the Authentik server