Merge pull request #105 from DiamondLightSource/get_build_working

Update and get a working build for deployment

Author: noemifrisina

.devcontainer/Dockerfile

@@ -0,0 +1,17 @@
+# Base stage with Node.js and pnpm
+FROM node:20-bullseye AS base
+WORKDIR /workspaces
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    vim \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install pnpm globally
+RUN npm install -g pnpm@latest
+
+# Developer stage
+FROM base AS developer
+
+# Keep container alive for devcontainer exec
+CMD ["pnpm", "start"]

.devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+{
+  "name": "I24 DAQ UI Dev Container",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "target": "developer",
+    "context": ".."
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "ms-vscode.vscode-typescript-next",
+        "esbenp.prettier-vscode",
+        "ms-vscode.vscode-json",
+        "redhat.vscode-yaml"
+      ],
+      "settings": {
+        "typescript.preferences.preferTypeOnlyAutoImports": true,
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.codeActionsOnSave": {
+          "source.fixAll.eslint": "always"
+        }
+      }
+    }
+  },
+  "features": {
+    // add in eternal history and other bash features
+    "ghcr.io/diamondlightsource/devcontainer-features/bash-config:1": {}
+  },
+  // Create the config folder for the bash-config feature
+  "initializeCommand": "mkdir -p ${localEnv:HOME}/.config/bash-config",
+  "runArgs": ["--net=host", "--security-opt=label=disable"],
+  "workspaceMount": "source=${localWorkspaceFolder}/..,target=/workspaces,type=bind",
+  "postCreateCommand": "pnpm install"
+}

.github/workflows/_lint.yaml

@@ -6,24 +6,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 10
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: "npm"
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Run audit
-        run: npm audit --audit-level=high
+        run: pnpm audit --audit-level=high
 
       - name: Run Prettier
-        run: npm run prettier
+        run: pnpm run prettier
 
       - name: Run ESLint
-        run: npm run lint
+        run: pnpm run lint
 
       - name: Run TypeScript Compiler
-        run: npm run tscheck
+        run: pnpm run tscheck

.github/workflows/_tests.yaml

@@ -13,14 +13,20 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
+      - name: Use pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "npm"
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
 
       - name: Install dependencies
-        run: npm install
+        run: pnpm install --frozen-lockfile
 
       - name: Run tests
-        run: npm test
+        run: pnpm test

.github/workflows/actions.yaml

@@ -24,17 +24,22 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Use pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
           node-version: 22
-          cache: "npm"
+          cache: "pnpm"
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm i
 
       - name: Build
-        run: npm run build
+        run: pnpm run build
 
       - name: Setup Pages
         uses: actions/configure-pages@v4

.husky/pre-commit

@@ -1,3 +1,3 @@
-npm run lint
-npm run prettier
-npm test
+pnpm run lint
+pnpm run prettier
+pnpm test

README.md

@@ -5,12 +5,19 @@
 On a DLS workstation, clone the repository and inside it run:
 
 ```bash
-module load node
+module load vscode
 
-npm install
+code .
 ```
 
-Note that the current default version for node is `21.7.1`, which is getting quite old and not supported by somme of the packages we need to install. It would be best to have a version `>=22.12.0`.
+When vscode opens, select `Reopen in container` to get a working environment with `pnpm` installed.
+
+On a non-dls workstation you have the option of opening the devcontainer or installing pnpm globally and then running the app.
+To install the app:
+
+```bash
+pnpm install
+```
 
 ## Gotchas
 
@@ -51,7 +58,13 @@ For I24 instead, The first few plans are in the branch https://github.com/Diamon
 Once all the above steps are done, start a blueapi server. The gui can be started by running:
 
 ```bash
-npm run dev
+pnpm run dev
 ```
 
 inside the repository and clicking on the link.
+
+## Make a release
+
+Make a release from the github `Releases` page and point it to either a tag or a branch.
+There is a workflow job that will then build the app and publish a docker image - which is necessary
+for deployment.