fix: run with docker (#16)

---------

Co-authored-by: Saúl Piña <[email protected]>

.github/workflows/build.yml

@@ -2,6 +2,7 @@ name: Build User Tasks
 
 on:
   pull_request:
+  workflow_call:
 
 permissions:
   contents: read
@@ -11,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup NodeJS
         uses: actions/setup-node@v4

.github/workflows/main.yml

@@ -10,34 +10,19 @@ permissions:
 
 jobs:
   build:
+    uses: ./.github/workflows/build.yml
+  Publish:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: npm
-          cache-dependency-path: package-lock.json
-          node-version: 20
-
-      - name: Installing Dependencies
-        run: npm install
-
-      - name: Linting
-        run: npm run lint -ws
-
-      - name: Build App
-        run: npm run build -ws
-
-      - name: Build and Publish
+      - name: Publish Image
         uses: littlehorse-enterprises/publish-image@v1
         with:
           image-name: lh-user-tasks-ui
           registry: ecr
-          context: ui
-          dockerfile: ui/Dockerfile
+          dockerfile: Dockerfile
 
       - name: Trigger API Build
         run: |

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:alpine
+WORKDIR /app
+
+COPY ./ui/.next/standalone ./
+COPY ./ui/.next/static ./ui/.next/static
+COPY ./node_modules ./node_modules
+COPY ./entrypoint.sh ./
+
+ENV NODE_ENV=production \
+    PORT=3000 \
+    HOSTNAME="0.0.0.0"
+EXPOSE 3000
+
+ENTRYPOINT [ "./entrypoint.sh" ]

README.md

@@ -2,12 +2,68 @@
 
 This repository contains the code for the UserTasks UI, and UserTasks API Client. This repository will help you interact with LittleHorse's UserTask API.
 
+## Environment Variables
+
+The following environment variables are required to run the UserTask UI:
+
+- `NEXTAUTH_SECRET` Secret for next-auth
+- `KEYCLOAK_HOST` Url for keycloak issuer
+- `KEYCLOAK_REALM` Keycloak Realm
+- `KEYCLOAK_CLIENT_ID` Keycloack client id
+- `KEYCLOAK_CLIENT_SECRET` Keycloack client secret
+- `LHUT_API_URL` User-Task proxy Url
+- `LHUT_TENANT_ID` LH Tenant
+
+## Prerequisites
+
+Before starting the UserTask UI, ensure that the following services are running:
+
+1. **LittleHorse Server**
+2. **Keycloak Server**
+3. **LH UserTasks API**
+
+For detailed instructions on setting up these servers, please refer to the [LittleHorse documentation](https://github.com/littlehorse-enterprises/lh-user-tasks-api/blob/main/README.md).
+
 ## Getting Started
 
-### UI
+### Development
+
+Install git hooks:
+
+```shell
+pre-commit install
+```
+
+Create a copy of `./ui/.env.sample` as `./ui/.env.local` and modify it accordingly to your littlehorse-server and keycloak configuration.
+
+Then simply run
+
+```shell
+npm install
+npm run dev -ws
+```
+
+The API Client will start listening to any live changes in the `api-client` folder and recompile it.
+
+The UI will start with watch mode on [http://localhost:3000](http://localhost:3000)
+
+### Start the UserTask UI with Docker
 
-Follow the instructions in the [UI README](./ui/README.md) to get the UI configured and running.
+Build the docker image:
 
-### API Client
+```sh
+./local-dev/build-image.sh
+```
 
-Follow the instructions in the [API Client README](./api-client/README.md) to get the API Client configured and running.
+```bash
+docker run --name lh-user-tasks-ui -p 3000:3000 --rm -it \
+  --env NEXTAUTH_URL='http://localhost:3000' \
+  --env NEXTAUTH_SECRET=' ' \
+  --env KEYCLOAK_HOST='http://keycloak:8888' \
+  --env KEYCLOAK_REALM='default' \
+  --env KEYCLOAK_CLIENT_ID='user-tasks-client' \
+  --env KEYCLOAK_CLIENT_SECRET=' ' \
+  --env LHUT_API_URL='http://localhost:8089' \
+  --env LHUT_TENANT_ID='default' \
+  littlehorse/lh-user-tasks-ui:latest
+```

api-client/.prettierignore

@@ -0,0 +1 @@
+dist/

ui/entrypoint.sh → entrypoint.sh

@@ -2,44 +2,44 @@
 
 set -e
 
-if [ -z "${NEXTAUTH_URL}" ]; then
+if [ ! "${NEXTAUTH_URL+x}" ]; then
     echo "Provide the NEXTAUTH_URL env variable"
     exit 1
 fi
 
-if [ -z "${NEXTAUTH_SECRET}" ]; then
+if [ ! "${NEXTAUTH_SECRET+x}" ]; then
     echo "Provide the NEXTAUTH_SECRET env variable"
     exit 1
 fi
 
-if [ -z "${KEYCLOAK_HOST}" ]; then
+if [ ! "${KEYCLOAK_HOST+x}" ]; then
     echo "Provide the KEYCLOAK_HOST env variable"
     exit 1
 fi
 
-if [ -z "${KEYCLOAK_CLIENT_ID}" ]; then
+if [ ! "${KEYCLOAK_CLIENT_ID+x}" ]; then
     echo "Provide the KEYCLOAK_CLIENT_ID env variable"
     exit 1
 fi
 
-if [ -z "${KEYCLOAK_CLIENT_SECRET}" ]; then
+if [ ! "${KEYCLOAK_CLIENT_SECRET+x}" ]; then
     echo "Provide the KEYCLOAK_CLIENT_SECRET env variable"
     exit 1
 fi
 
-if [ -z "${KEYCLOAK_REALM}" ]; then
+if [ ! "${KEYCLOAK_REALM+x}" ]; then
     echo "Provide the KEYCLOAK_REALM env variable"
     exit 1
 fi
 
-if [ -z "${LHUT_API_URL}" ]; then
+if [ ! "${LHUT_API_URL+x}" ]; then
     echo "Provide the LHUT_API_URL env variable"
     exit 1
 fi
 
-if [ -z "${LHUT_TENANT_ID}" ]; then
+if [ ! "${LHUT_TENANT_ID+x}" ]; then
     echo "Provide the LHUT_TENANT_ID env variable"
     exit 1
 fi
 
-/entrypoint.sh
+node ui/server.js

ui/local-dev/build.sh → local-dev/build.sh

@@ -3,7 +3,7 @@
 set -e
 
 SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)
-CONTEXT_DIR=$(cd "$SCRIPT_DIR/../.." && pwd)
+CONTEXT_DIR=$(cd "$SCRIPT_DIR/.." && pwd)
 
 cd "${CONTEXT_DIR}"
 

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "lh-user-tasks",
+	"name": "@littlehorse-enterprises/user-tasks",
 	"author": "LittleHorse Enterprises",
 	"repository": {
 		"type": "git",

ui/README.md

@@ -1,27 +1,5 @@
 # LH UserTask UI
 
-## Environment Variables
-
-If running the app without Docker, you need to fill in the environment variables in the `.env.local` at the root folder.
-
-- `NEXTAUTH_SECRET` Secret for next-auth
-- `KEYCLOAK_HOST` Url for keycloak issuer
-- `KEYCLOAK_REALM` Keycloak Realm
-- `KEYCLOAK_CLIENT_ID` Keycloack client id
-- `KEYCLOAK_CLIENT_SECRET` Keycloack client secret
-- `LHUT_API_URL` User-Task proxy Url
-- `LHUT_TENANT_ID` LH Tenant
-
-## Prerequisites
-
-Before starting the UserTask UI, ensure that the following services are running:
-
-1. **Littlehorse Server**
-2. **Keycloak Server**
-3. **LH UserTasks API**
-
-For detailed instructions on setting up these servers, please refer to the [Littlehorse documentation](https://github.com/littlehorse-enterprises/lh-user-tasks-api/blob/main/README.md).
-
 ## Development
 
 Install git hooks:
@@ -41,7 +19,7 @@ npm run dev
 
 The application will start with watch mode on [http://localhost:3000](http://localhost:3000)
 
-## Start the UserTask Ui with Docker
+## Start the UserTask UI with Docker
 
 Build the docker image:
 
@@ -50,13 +28,13 @@ Build the docker image:
 ```
 
 ```bash
-docker run --rm \
+docker run --name lh-user-tasks-ui -p 3000:3000 --rm \
   --env NEXTAUTH_URL='http://localhost:3000' \
   --env NEXTAUTH_SECRET='<any secret here>' \
   --env KEYCLOAK_HOST='http://keycloak:8888' \
   --env KEYCLOAK_REALM='default' \
   --env KEYCLOAK_CLIENT_ID='user-tasks-client' \
-  --env KEYCLOAK_CLIENT_SECRET='<client secret>' \
+  --env KEYCLOAK_CLIENT_SECRET=' ' \
   --env LHUT_API_URL='http://localhost:8089' \
   --env LHUT_TENANT_ID='default' \
   littlehorse/lh-user-tasks-ui:latest

ui/package.json

@@ -1,6 +1,5 @@
 {
-  "name": "user-tasks-ui",
-  "private": true,
+  "name": "@littlehorse-enterprises/user-tasks-ui",
   "scripts": {
     "dev": "next dev --turbo",
     "build": "next build",