Converted demo to use Docker Compose

README.md

@@ -2,144 +2,52 @@
 
 This project implements the *Hello World* of API-driven apps: a simple TODO app, built with Vue 3.
 
-The `bbconf` folder contains basebox config files, GraphQL schema, precompiled database schema, type maps etc. and scripts to run broker and dbproxy from within the `bbconf` directory.
+## Quick instructions
 
-These files assume that you extracted the [basebox distribution](https://basebox.io/download) next to this repository's root.
+If you have docker installed:- 
 
-Example:  
+* `docker compose up` in a terminal window
-Let's assume you create a `basebox` folder in your home directory, change into it, extract the basebox distribution archive in that folder and then clone the contents of this repository into the same folder:
+* Go to `http://127.0.0.1:5167/` in your browser
 
-``` sh
+For more information, see as follows.
-cd ~
-mkdir basebox
-cd basebox
-tar xzf basebox-x.x.x.tgz  # adopt this command to the archive you downloaded
-git clone --single-branch --depth 1 https://gitea.basebox.health/samples/vue-todo.git
-```
 
-The basebox archive will be extracted into a directory named `basebox-<version>`; for the scripts in `vue-todo/bbconf` to find the basebox binaries, please create a symbolic link to the basebox directory named `basebox`, e.g.
+## Requirements:-
 
-``` sh
+* [Docker](https://www.docker.com/)
-ln -s basebox-x.x.x basebox
-```
 
-If you follow these steps, the scripts in `bbconf` will work out of the box.
+## Running instructions:-
 
-## Installation
+* `docker compose up`
 
-To install this app, you need
+This will download the basebox Docker images, a postgres instance and the demo application. 
 
-* npm, node.js
+Once Docker is up and running, you should be able to go to your browser and navigate to http://127.0.0.1:5167/ to view the demo.
-* A PostgreSQL server
-* basebox (broker, dbproxy, bbc extracted from the basebox archive)
-* Keycloak or Auth0
 
-### PostgreSQL Preparation
+Note that if this does not work, find the npm console out (you should find the output in the Docker terminal window), which will look like the following:-
-
-> You need a PostgreSQL database to run this app. You can read detailed instructions on how to 
-> install PostgreSQL and create a test database at our [PostgreSQL Primer](https://docs.basebox.io/getting-started/postgresql/) page.
-
-Let's create a PostgreSQL user and database for the TODO app:
-
-``` sh
-# Under (Debian) Linux, switch to the postgres user first:
-# sudo su postgres
-createuser -DRP bb_todo  # default password: basebox
-createdb -O bb_todo bb_todo
-```
-
-If you use a different password than `basebox`, you also have to change `bbconf/dbproxy-config.toml` accordingly.
-
-Tell PostgreSQL that the `bb_todo` user connects to the database using md5 authentication. To do so, edit `/etc/postgresql/<PostgreSQL version>/main/pg_hba.conf` (on Debian based Linux systems) to contain the following:
-
-```conf
-# TYPE  DATABASE        USER            ADDRESS                 METHOD
-local   bb_todo         bb_todo                                 md5
-```
-
-Make sure to add the line that starts with `local   bb_todo...` under the commented header that starts with `# TYPE...`. PostgreSQL uses the first line that matches, so having the new line on top makes sure no other line overrides it.
-
-
-Reload PostgreSQL config:
-
-```sh
-sudo systemctl reload postgresql
-```
-
-#### Database Schema
-
-This repository contains an already compiled SQL file that creates the database schema:
-
-```sh
-psql -U bb_todo bb_todo < bbconf/bb_todo-datamodel.sql  # Enter password when prompted.
-```
-
-The database configuration and installation is now complete.
-
-If you're curious, you can recompile the GraphQL schema like so:
-
-```sh
-basebox/bin/bbc --prefix=bb_todo -f vue-todo/bbconf/todo_schema.graphql -o vue-todo/bbconf
-```
-
-### Client Installation
-
-After installing [node.js](https://nodejs.org/en/download) and [npm](https://www.npmjs.com/package/npm), open a terminal window, go to the root of the vue-todo repository and enter the following commands:
-
-``` sh
-cd vue-todo
-npm i
-```
-
-This will install the client app's dependencies.
-
-### OpenID Connect
-
-You can setup and use your own OpenID Connect server; if you do so, you also have to update the config files `bbconf/broker-config.toml` and `bbconf/dbroxy-config.toml` accordingly.
-
-## Run
-
-### Start dbproxy
-
-Open a new terminal window, then:
-
-``` sh
-cd ~/basebox/vue-todo/bbconf
-./dbproxy.sh
-```
-
-This command starts dbproxy; you will see a lot of log messages being written to the console.
-
-### Start broker
-
-Open another terminal window, then:
-
-``` sh
-cd ~/basebox/vue-todo/bbconf
-./broker.sh
-```
-
-Again, you see broker's log messages on the console. Each request to the broker will be shown, similar to an Apache or nginx access log.
-
-### Start the Client
-
-In another terminal window:
-
-``` sh
-cd ~/basebox/vue-todo
-npm run dev
-```
-
-This will start a node.js based HTTP test server that will host the client application. It will print the URL where you can load it to the console:
 
 ```
 
   VITE v4.1.4  ready in 273 ms
 
-  ➜  Local:   http://localhost:5173/
+  ➜  Local:   http://localhost:5167/
   ➜  Network: use --host to expose
   ➜  press h to show help
 
 ```
 
-Open your browser, go go the URL in the npm console, and enjoy.
+Use the url publish here to view the demo.
+
+The `bbconf` folder contains basebox GraphQL schema, config files, precompiled database schema, type maps etc. The GraphQL schema is the central file of basebox, from this we generate the database and create GraphQL operations to query and mutate the database. Please have a look at `bbconf\basebox\schema.graphql` to get an idea of what this looks like.
+
+## Terminal output
+We have intentionally put the basebox servers (the `broker` and the `dbproxy`) into tracing mode (this is configured in the config files in `bbconf/basebox`) so you can see more of what's happening behind the scenes while using the front-end application. Now of the SQL generated is hardcoded, they are all converted directly from the GraphQL requests.
+
+## Compiling
+
+The basebox compiler (bbc) compiles the GraphQL schema into a database script (this is used to create the database for our backend service), a resolver file that is used by the `dbproxy` to query and mutate the database, and a typemap file that is also used by the `dbproxy` to map GraphQL and database types together. 
+
+You can make changes to the schema files and generated new config files (liek the database script), this is how you would run the basebox compiler (`bbc`)
+```
+docker run --rm -v ./../bbconf/basebox/:/bbconf --name bbc gitea.basebox.health/basebox-distribution/bbc:latest /bbconf/schema.graphql --prefix bbtest -o /bbconf/
+```
+Note that it's better to make a copy of the schema first and use that as changes would not necessarily work with the front-end/vue application. 

bbconf/basebox/broker-config.toml

@@ -0,0 +1,63 @@
+[generic]
+# log level; can be error, warn, info, debug, trace
+log_level = "trace"
+
+[graphql]
+# path and file name to GraphQL schema file
+schema_file = "/bbconf/schema.graphql"
+allow_introspection = true
+
+[proxy]
+# host name or IP of basebox DB proxy
+host = "dbproxy"
+port = 8081
+# Whether to use http or https to connect to the proxy
+tls = false
+
+[server]
+# Host name of the broker (GraphQL server)
+host = "broker"
+
+# Port number; default is 80 for http, 443 for https
+port = 8080
+
+max_request_size = 33554433
+
+[auth]
+# Contents of 'iss' field, usually the URL of the authentication realm
+iss = "https://basebox-test-1.eu.auth0.com/"
+# Access token audience field
+aud = "basebox-todo"
+
+# public key file for the IdP server (KeyCloak in this case)
+# jwks_file = "/bbconf/idp_keys.json"
+
+#####
+
+# OpenID Connect scope; default is "openid profile email"
+scope = "openid profile email"
+
+# Fully qualified URL to the OAuth2 callback endpoint.
+# After the user entered his/her credentials at the IdP's login form, the client will be redirected
+# to this URL. When the client receives a request to this URL, it must send the request's query
+# string to the broker's "openid_connect_path" set below.
+#redirect_url = "http://127.0.0.1:5167/oauth-callback"
+
+# OpenID Connect login completion request path.
+# The client must pass the query string from the call to "redirect_url" to this URL and gets
+# a basebox session token in return.
+#openid_connect_path = "/oauth/complete-login"
+
+# Path to the browser login URL.
+# This path is where the basebox broker returns a 302 response that redirects the browser to
+# the IdP login page; the target URL will contain all query parms needed to initiate an
+# auth code flow login procedure, incl. CSRF protection tokens etc.
+#login_path = "/oauth/login"
+
+# Logout path that allows explicit, immediate logouts.
+# Simply POST to this URL with the session cookie or bearer token.
+#logout_path = "/oauth/logout"
+
+# TODO - need?
+# Set to true to get a user's additional claims from OAuth2
+user_info_additional_claims_required = true

bbconf/basebox/dbproxy-config.toml

@@ -0,0 +1,55 @@
+[generic]
+# log level; can be error, warn, info, debug, trace
+log_level = "trace"
+
+
+[oidc_config]
+# `mode` can be either "access-token" or "client". In access-token mode, all clients sending
+# GraphQL requests to basebox just pass an access token in the "Authorization" HTTP header.
+# In client mode, basebox acts as the OpenID Connect client and requests ID and access tokens
+# from the OpenID Connect server on behalf of the client.
+# See https://docs.basebox.io/guide/authorization
+mode = "access-token"
+
+# Access token validation:
+# Contents of 'iss' field, usually the URL of the authentication realm
+#iss = "https://www.idp.com:8090/realms/master"
+# iss = "https://kcdev.basebox.io:8443/realms/test-runner"
+
+# # Contents of the 'aud' field for access tokens; for Keycloak, this defaults to 'account';
+# # for Auth0, this is the value of the Default Audience field in your Tenant settings.
+# aud = "account"
+
+# Contents of 'iss' field, usually the URL of the authentication realm
+iss = "https://basebox-test-1.eu.auth0.com/"
+# Access token audience field
+aud = "basebox-todo"
+
+# public key file for the IdP server (KeyCloak in this case)
+#jwks_file = "/bbconf/idp_keys.json"
+
+[graphql]
+# path and file name to GraphQL schema file
+schema_file = "/bbconf/schema.graphql"
+# Path and file name of the resolver map file
+resolver_map_file = "/bbconf/bb_todo-resolver.toml"
+# Path and file name of the type map file
+type_map_file = "/bbconf/bb_todo-typemap.json"
+
+[database]
+db_type = "postgres"
+host = "host.docker.internal"
+port = 5430
+ssl_mode = "no"
+db_name = "bb_todo"
+username = "bb_todo"
+password = "bigsecret"
+
+[server]
+# Host name of (this) proxy server
+host = "dbproxy"
+
+# Port to serve on
+port = 8081
+
+max_request_size = 33554432

bbconf/broker-config.toml

@@ -1,37 +0,0 @@
-[generic]
-# log level; can be error, warn, info, debug, trace
-log_level = "trace"
-
-[graphql]
-# path and file name to GraphQL schema file
-schema_file = "todo_schema.graphql"
-allow_introspection = true
-
-[proxy]
-# host name or IP of basebox DB proxy
-host = "localhost"
-port = 8081
-# Whether to use http or https to connect to the proxy
-tls = false
-
-[server]
-# Host name of the broker (GraphQL server)
-host = "127.0.0.1"
-
-# Port number; default is 80 for http, 443 for https
-port = 8080
-
-# number of HTTP server threads to spawn; default is one per CPU core
-workers = 2
-
-# Path and file name of TLS/SSL key file
-# cert_key_file = "/path/to/key.pem"
-
-# Path and file name of TLS certificate (chain) file
-# cert_file = "/path/to/cert.pem"
-
-[auth]
-# Contents of 'iss' field, usually the URL of the authentication realm
-iss = "https://basebox-test-1.eu.auth0.com/"
-# Access token audience field
-aud = "basebox-todo"

bbconf/broker.sh

@@ -1,6 +0,0 @@
-#!/bin/bash
-# Run basebox broker from the samples/toodo/bbconf directory
-
-. ./util.sh
-
-bb_run broker -c broker-config.toml

bbconf/compile.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-#
-# Compile the todo schema.
-#
-. ./util.sh
-
-bb_run bbc --prefix=bb_todo -f todo_schema.graphql

bbconf/dbproxy-config-peer.toml

@@ -1,41 +0,0 @@
-[generic]
-# log level; can be error, warn, info, debug, trace
-log_level = "trace"
-
-[oidc_config]
-# Incoming ID tokens are validated using, among other, the following fields.
-# Contents of 'iss' field, usually the URL of the authetnication realm
-iss = "https://basebox-test-1.eu.auth0.com/"
-# Access token audience field
-aud = "basebox-todo"
-
-[graphql]
-# path and file name to GraphQL schema file
-schema_file = "todo_schema.graphql"
-# Path and file name of the resolver map file
-resolver_map_file = "bb_todo-resolver.toml"
-# Path and file name of the type map file
-type_map_file = "bb_todo-typemap.json"
-
-[database]
-# Type of database; currently, only "postgres" is suppoerted
-db_type = "postgres"
-
-# Setting just db_name will use PostgreSQL peer authentication mode
-db_name = "bb_todo"
-
-[server]
-# Host name of (this) proxy server
-host = "localhost"
-
-# Port number; default is 80 for http, 443 for https
-port = 8081
-
-# number of HTTP server threads to spawn; default is one per CPU core
-workers = 2
-
-# Path and file name of TLS/SSL key file
-# cert_key_file = "/path/to/key.pem"
-
-# Path and file name of TLS certificate (chain) file
-# cert_file = "/path/to/cert.pem"

bbconf/dbproxy-config.toml

@@ -1,47 +0,0 @@
-[generic]
-# log level; can be error, warn, info, debug, trace
-log_level = "trace"
-
-[auth]
-# Incoming ID tokens are validated using, among other, the following fields.
-# Contents of 'iss' field, usually the URL of the authentication realm
-iss = "https://basebox-test-1.eu.auth0.com/"
-# Access token audience field
-aud = "basebox-todo"
-
-[graphql]
-# path and file name to GraphQL schema file
-schema_file = "todo_schema.graphql"
-# Path and file name of the resolver map file
-resolver_map_file = "bb_todo-resolver.toml"
-# Path and file name of the type map file
-type_map_file = "bb_todo-typemap.json"
-
-[database]
-# Type of database; currently, only "postgres" is suppoerted
-db_type = "postgres"
-# The host where the DB server is runnung
-host = "localhost"
-# Port the DB server is listening at
-port = 5432
-# Database name
-db_name = "bb_todo"
-username = "bb_todo"
-password = "basebox"
-ssl_mode = "no"
-
-[server]
-# Host name of (this) proxy server
-host = "localhost"
-
-# Port number; default is 80 for http, 443 for https
-port = 8081
-
-# number of HTTP server threads to spawn; default is one per CPU core
-workers = 2
-
-# Path and file name of TLS/SSL key file
-# cert_key_file = "/path/to/key.pem"
-
-# Path and file name of TLS certificate (chain) file
-# cert_file = "/path/to/cert.pem"

bbconf/dbproxy-peer.sh

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-. ./util.sh
-
-bb_run broker -c dbproxy-config-peer.toml

bbconf/dbproxy.sh

@@ -1,6 +0,0 @@
-#!/bin/bash
-# Run basebox dbproxy from the samples/toodo/bbconf directory
-
-. ./util.sh
-
-bb_run dbproxy -c dbproxy-config.toml

bbconf/postgres/creation-script.sql

@@ -0,0 +1,50 @@
+--
+-- This file is used to create the database schema. It is a copy of the `bb_todo-datamodel.sql` file
+-- generated by the basebox compiler. 
+--
+
+--
+-- Generated by basebox compiler (bbc) version 0.1.0-beta.23 at 2023-11-01 10:35:59+01:00
+--
+CREATE EXTENSION IF NOT EXISTS pgcrypto; 
+
+CREATE TABLE "List" (
+  "id" UUID DEFAULT gen_random_uuid() NOT NULL,
+  "title" VARCHAR NOT NULL,
+  "user_username" VARCHAR NOT NULL 
+);
+
+CREATE TABLE "Task" (
+  "id" UUID DEFAULT gen_random_uuid() NOT NULL,
+  "title" VARCHAR NOT NULL,
+  "description" VARCHAR,
+  "completed" BOOLEAN NOT NULL,
+  "user_username" VARCHAR NOT NULL,
+  "list_id" UUID NOT NULL 
+);
+
+CREATE TABLE "User" (
+  "username" VARCHAR NOT NULL,
+  "name" VARCHAR 
+);
+
+ALTER TABLE "List" ADD COLUMN ".ownerId" VARCHAR NOT NULL;
+
+ALTER TABLE "Task" ADD COLUMN ".ownerId" VARCHAR NOT NULL;
+
+ALTER TABLE "User" ADD COLUMN ".ownerId" VARCHAR NOT NULL;
+
+ALTER TABLE "List" ADD PRIMARY KEY ("id");
+
+ALTER TABLE "Task" ADD PRIMARY KEY ("id");
+
+ALTER TABLE "User" ADD PRIMARY KEY ("username");
+
+ALTER TABLE "List" ADD CONSTRAINT fk_list_1 FOREIGN KEY ("user_username") REFERENCES "User" ("username");
+
+ALTER TABLE "Task" ADD CONSTRAINT fk_task_2 FOREIGN KEY ("user_username") REFERENCES "User" ("username");
+
+ALTER TABLE "Task" ADD CONSTRAINT fk_task_3 FOREIGN KEY ("list_id") REFERENCES "List" ("id");
+
+ALTER TABLE "User" ADD CONSTRAINT uq_user_4 UNIQUE (".ownerId");
+

bbconf/util.sh

@@ -1,34 +0,0 @@
-#!/bin/bash
-# Utility functions for basebox test shell scripts
-#
-
-bin_dir="../../basebox/bin"
-source_dir="../../.."
-
-#
-# Run a basebox command.
-#
-# Assuming that if run by a customer that wants to try the demo app, we first look if there
-# is an exeutable at "../../basebox/bin/$1" and run it if present.
-# If not, we assume this is being run inside of a basebox developer environment and start the
-# command with "cargo run".
-#
-function bb_run {
-    command="$1"
-    args="${@:2}"
-
-    # check bin directory
-    if [ -f "$bin_dir/$command" ]; then
-        "$bin_dir/$command" $args
-        return $?
-    fi
-
-    # check source tree
-    if [ -d "$source_dir/$command" ]; then
-        cargo run --manifest-path=$source_dir/$command/Cargo.toml -- $args
-        return $?
-    fi
-
-    echo "Program '$command' not found!"
-    return 2
-}

docker-compose.yml

@@ -0,0 +1,42 @@
+version: '3.9'
+
+services:
+  dbproxy:
+    image: gitea.basebox.health/basebox-distribution/dbproxy
+    ports:
+      - "8081:8081"
+    command:
+      ["--config-file=/bbconf/dbproxy-config.toml"]
+    volumes:
+      - ./bbconf/basebox/:/bbconf
+  broker:
+    image: gitea.basebox.health/basebox-distribution/broker
+    ports:
+      - "8080:8080"
+    command:
+      ["--config-file=/bbconf/broker-config.toml"]
+    volumes:
+      - ./bbconf/basebox/:/bbconf
+  db:
+    image: postgres:15-alpine
+    volumes:
+      - postgres5:/var/lib/postgresql/data
+      - ./bbconf/postgres:/docker-entrypoint-initdb.d
+    ports:
+      - "5430:5432"
+    environment:
+      - POSTGRES_PASSWORD=bigsecret
+      - POSTGRES_USER=bb_todo
+      - POSTGRES_DB=bb_todo
+  web:
+    build:
+      context: .
+      dockerfile: web.Dockerfile
+      target: development
+    ports:
+      - "5167:5167"
+    volumes:
+      - .:/project
+      - /project/node_modules
+volumes:
+  postgres5:

vite.config.js

@@ -7,7 +7,7 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [vue()],
   server: {
-    host: '127.0.0.1',
+    host: '0.0.0.0',
     port: 5167
   },
   resolve: {

web.Dockerfile

@@ -0,0 +1,26 @@
+# syntax=docker/dockerfile:1.4
+FROM --platform=$BUILDPLATFORM node:20-alpine AS development
+
+RUN mkdir /project
+WORKDIR /project
+
+COPY . .
+
+RUN npm install -g @vue/cli
+RUN npm install
+ENV HOST=0.0.0.0
+CMD ["npm", "run", "dev"]
+
+FROM development as dev-envs
+RUN <<EOF
+apk update
+apk add git
+EOF
+
+RUN <<EOF
+addgroup -S docker
+adduser -S --shell /bin/bash --ingroup docker vscode
+EOF
+# install Docker tools (cli, buildx, compose)
+COPY --from=gloursdocker/docker / /
+CMD ["npm", "run", "dev"]