Vite

.devcontainer/devcontainer.json

@@ -11,7 +11,9 @@
 		"vscode": {
 			"settings": {},
 			"extensions": [
-			]
+				"Vue.volar",
+				"ms-edgedevtools.vscode-edge-devtools"
+			  ]
 		}
 	},
 

.github/workflows/docker-publish.yml → .github/workflows/build-and-publish.yml

@@ -1,24 +1,72 @@
-name: Docker
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
+name: Build and Publish
 
 on:
+  push:
+    branches:
+      - '**'
   release:
     types: [created]
-  
+
 env:
   # Use docker.io for Docker Hub if empty
   REGISTRY: ghcr.io
   # github.repository as <account>/<repo>
   IMAGE_NAME: ${{ github.repository }}
-
-
+
 jobs:
   build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Build frontend
+        run: |
+          cd client
+          npm ci
+          npm run build
+      - name: Build backend
+        run: |
+          cd server
+          npm ci
+      - uses: actions/upload-artifact@v4
+        with:
+          name: frontend-artifact
+          path: client/dist
 
+  publish-npm:
+    if: github.event_name == 'release'
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - name: Download frontend artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: frontend-artifact
+          path: server/src/public
+      - name: Build backend
+        run: |
+          cd server
+          npm ci
+      - run: |
+          cd server
+          npm version --no-git-tag-version ${{ github.ref_name }}
+          npm publish --allow-same-version
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+
+  publish-docker:
+    if: github.event_name == 'release'
+    needs: publish-npm
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -62,20 +110,27 @@ jobs:
         uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Download frontend artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: frontend-artifact
+          path: server/src/public
 
       # Build and push Docker image with Buildx (don't push on PR)
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
         uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
         with:
-          context: .
+          context: server
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           platforms: linux/amd64,linux/arm64
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          file: Dockerfile.ci
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.gitignore

@@ -2,3 +2,6 @@
 node_modules
 *.log
 *.gz
+dist
+server/src/public
+

Dockerfile

@@ -1,30 +1,34 @@
-ARG NODE_VERSION=18.0.0
+ARG NODE_VERSION=20.14.0
 
-FROM node:${NODE_VERSION}-alpine
+FROM node:${NODE_VERSION}-alpine AS client-builder
+
+WORKDIR /usr/src/app
+
+COPY client/ ./
+
+RUN npm ci
 
-# Use production node environment by default.
 ENV NODE_ENV production
 
+RUN npm run build
+
+FROM node:${NODE_VERSION}-alpine
 
 WORKDIR /usr/src/app
 
-# Download dependencies as a separate step to take advantage of Docker's caching.
-# Leverage a cache mount to /root/.npm to speed up subsequent builds.
-# Leverage a bind mounts to package.json and package-lock.json to avoid having to copy them into
-# into this layer.
-RUN --mount=type=bind,source=package.json,target=package.json \
-    --mount=type=bind,source=package-lock.json,target=package-lock.json \
-    --mount=type=cache,target=/root/.npm \
-    npm ci --omit=dev
+COPY server/ .
+
+COPY --from=client-builder /usr/src/app/dist ./src/public
+
+RUN npm ci --omit=dev
+
+ENV NODE_ENV production
 
 # Run the application as a non-root user.
 USER node
 
-# Copy the rest of the source files into the image.
-COPY . .
-
 # Expose the port that the application listens on.
 EXPOSE 3000
 
 # Run the application.
-CMD node bin/www
+CMD node bin/www

Dockerfile.ci

@@ -0,0 +1,20 @@
+ARG NODE_VERSION=20.14.0
+
+FROM node:${NODE_VERSION}-alpine
+
+WORKDIR /usr/src/app
+
+COPY . .
+
+RUN npm install
+
+RUN find . -path ./node_modules -prune -o -print
+
+# Run the application as a non-root user.
+USER node
+
+# Expose the port that the application listens on.
+EXPOSE 3000
+
+# Run the application.
+CMD node bin/www

client/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+    extends: [
+        // 'eslint:recommended', 
+        // 'plugin:@typescript-eslint/recommended',
+        "plugin:vue/base",
+        // "plugin:vue/vue3-essential",
+        // "plugin:vue/vue3-recommended"
+    ],
+    plugins: ['@typescript-eslint'],
+    rules: {
+        'vue/require-v-for-key': 'off',
+        '@typescript-eslint/no-unused-vars': 'warn'
+    },
+    parser: "vue-eslint-parser",
+    parserOptions: {
+        "parser": "@typescript-eslint/parser",
+        "ecmaVersion": 2020,
+        "sourceType": "module"
+    }
+}

client/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/ring.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; object-src 'none';style-src 'self' 'unsafe-inline'; img-src data: 'self'"> -->
+    <title>JSONata Server</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+