further improvements

Author: jamowei

.busybox

@@ -0,0 +1,70 @@
+name: Build and Release
+
+on:
+  push:
+    branches: main
+    tags:
+      - "v*.*"
+
+jobs:
+  buildAndRelease:
+    runs-on: ubuntu-latest
+
+    permissions:
+      # needed for creating a release
+      contents: write
+      # needed for pushing docker image
+      attestations: write
+      id-token: write
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
+      - name: Install Npm dependencies
+        run: npm install
+
+      - name: Run build script
+        run: node build.mjs
+
+      - name: Zip the out directory
+        if: startsWith(github.ref, 'refs/tags/v')
+        run: |
+          zip -r ${{ github.ref_name }}.zip out
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        if: startsWith(github.ref, 'refs/tags/v')
+        with:
+          name: Release ${{ github.ref_name }}
+          draft: false
+          prerelease: false
+          #body_path: CHANGELOG.md
+          files: |
+            ${{ github.ref_name }}.zip
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build Docker image
+        run: |
+          docker build -t ghcr.io/${{ github.repository }}:${{ github.ref_name }} .
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        if: startsWith(github.ref, 'refs/tags/v')
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Push Docker image
+        if: startsWith(github.ref, 'refs/tags/v')
+        run: |
+          docker push ghcr.io/${{ github.repository }}:${{ github.ref_name }}

.github/workflows/buildAndRelease.yaml

@@ -1,4 +1,2 @@
 node_modules
-
-dist/*.js
-dist/*.css
+out

.gitignore

@@ -0,0 +1,54 @@
+ARG ALPINE_VERSION=3.20
+
+FROM alpine:${ALPINE_VERSION} AS builder
+
+ARG BUSYBOX_VERSION=1.36.1
+
+# Install all dependencies required for compiling busybox
+RUN apk add gcc musl-dev make perl
+
+# Download busybox sources
+RUN wget https://busybox.net/downloads/busybox-${BUSYBOX_VERSION}.tar.bz2 \
+  && tar xf busybox-${BUSYBOX_VERSION}.tar.bz2 \
+  && mv /busybox-${BUSYBOX_VERSION} /busybox
+
+WORKDIR /busybox
+
+# Copy the busybox build config (limited to httpd)
+COPY .busybox .config
+
+# Compile
+RUN make && ./make_single_applets.sh
+
+# Create a non-root user to own the files and run our server
+RUN adduser -D static
+
+# Switch to the scratch image
+FROM scratch
+
+# port httpd runs on
+EXPOSE 3000
+
+# Copy over the user
+COPY --from=builder /etc/passwd /etc/passwd
+
+# Copy the static binary
+COPY --from=builder /busybox/busybox_HTTPD /busybox-httpd
+
+# Use our non-root user
+USER static
+WORKDIR /home/static
+
+# Uploads a blank default httpd.conf
+# This is only needed in order to set the `-c` argument in this base file
+# and save the developer the need to override the CMD line in case they ever
+# want to use a httpd.conf
+COPY httpd.conf .
+
+# Copy the static website
+# Use the .dockerignore file to control what ends up inside the image!
+# NOTE: Commented out since this will also copy the .config file
+COPY out .
+
+# Run busybox httpd
+CMD ["/busybox-httpd", "-f", "-v", "-p", "3000", "-c", "httpd.conf"]

Dockerfile

@@ -0,0 +1,21 @@
+PORT?=3000
+MKFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
+NAME := $(notdir $(patsubst %/,%,$(dir $(MKFILE_PATH))))
+
+build:
+	npm install
+	node build.mjs
+	docker build -t ${NAME}:latest .
+	@echo "🛠️ Docker build successful"
+
+serve:
+	npm install
+	node build.mjs serve
+
+run: build
+	@docker run --name ${NAME} -dt --rm --init -p ${PORT}:3000 ${NAME}:latest > /dev/null
+	@echo "🚀 Serving at http://localhost:${PORT}/"
+
+stop:
+	@docker container stop ${NAME} > /dev/null
+	@echo "☠️ Container ${NAME} stopped"

Makefile

@@ -1,24 +1,46 @@
 # spa-simple
 Simple SPA using [esbuild](https://esbuild.github.io/), [jsx-dom](https://www.npmjs.com/package/jsx-dom) and [tailwindcss](https://www.npmjs.com/package/tailwindcss)
 
-## Overview
+# Requirements
+* [NodeJS](https://nodejs.org/) or similar javascript engine
+* [Docker](https://www.docker.com/) or similar container engine
+
+# Development
 All source-files for the app resides in `src` folder. 
-Where the `app.jsx` file is your main entry point.
-Any custom css goes into the `app.css` file. That's all.
+Where the `src/main/app.jsx` file is your main entry point for `esbuild`.
+Any custom css goes into the `app.css` file and any static resource (e.g. html, ico, etc.) goes into the `src/resource` folder. That's all! 🙂
 
-## Getting Started
-After installing the dependencies with
+# Build App (for Production)
+Just run `make` or following commands
 ```
 npm install
+node build.mjs
+docker build -t ${NAME}:latest .
 ```
-Build and serve the app with
+
+# Serve App (for Development)
+Just run `make serve` or following commands
 ```
+npm install
 node build.mjs serve
 ```
-All output-files are inside the `dist` folder, which you can see in the browser by navigating to [http://0.0.0.0:8000/](http://0.0.0.0:8000/).
 
-## Build
-Build a minified version for production use with
+# Run Docker App
+Just run `make run` or following commands
 ```
-node build.mjs
+docker run --name ${NAME} -dt --rm --init -p ${PORT}:3000 ${NAME}:latest
+```
+
+# Stop Docker App
+Just run `make stop` or following commands
+```
+docker container stop ${NAME}
+```
+
+# Github Action
+Whenever a commit gets pushed to the `main` branch a workflow gets triggered, which builds the app.
+You can create a Github release by tagging a specific commit with `v*.*` and push it to the repository.
+```
+git tag v1.0
+git push origin tag v1.0
 ```

README.md

@@ -1,28 +1,55 @@
-import * as esbuild from 'esbuild'
+import * as esbuild from 'esbuild';
 import { tailwindPlugin } from 'esbuild-plugin-tailwindcss';
+import * as fs from 'fs';
+import * as path from 'path';
 
-const serve = process.argv[2] === 'serve'
+const appJs = 'app.tsx';
+const appDir = 'src/main';
+const resDir = 'src/resources';
+const outDir = 'out';
+const serve = process.argv[2] === 'serve';
 
+// esbuild config
 const conf = {
-    entryPoints: ['src/app.tsx'],
-    bundle: true,
-    minify: !serve,
-    plugins: [
-        // https://www.npmjs.com/package/esbuild-plugin-tailwindcss
-        tailwindPlugin(),
-    ],
-    outdir: 'dist',
-}
+  entryPoints: [`${appDir}/${appJs}`],
+  bundle: true,
+  minify: !serve,
+  plugins: [tailwindPlugin()],
+  outdir: outDir,
+};
 
+// serves the app (node build.mjs serve)
+// or builds it for production (node build.mjs)
 if (serve) {
-    // https://esbuild.github.io/api/#live-reload
-    const ctx = await esbuild.context(conf)
-    await ctx.watch()
-    const { host, port } = await ctx.serve({
-        servedir: conf.outdir,
-    })
-    console.log(`http://${host}:${port}/`)
+  const ctx = await esbuild.context(conf);
+  await ctx.watch();
+  const { host, port } = await ctx.serve({
+    port: 3000,
+    servedir: conf.outdir,
+  });
+  console.log(`🚀 Serving at http://${host}:${port}/`);
 } else {
-    await esbuild.build(conf)
-    await esbuild.stop()
-}
+  await esbuild.build(conf);
+  await esbuild.stop();
+}
+
+// copy static resources to output dir
+(function copyFiles(sourceDir, targetDir) {
+  fs.readdir(sourceDir, (err, files) => {
+    if (err) {
+      console.error('Error reading resource directory:', err);
+      return;
+    }
+
+    files.forEach((file) => {
+      const sourceFile = path.join(sourceDir, file);
+      const targetFile = path.join(targetDir, file);
+
+      fs.copyFile(sourceFile, targetFile, (err) => {
+        if (err) {
+          console.error('Error copying resource file:', err);
+        }
+      });
+    });
+  });
+})(resDir, outDir);