build WebApp inside Dockerfile

Author: jamowei

.github/workflows/buildAndRelease.yaml

@@ -36,32 +36,18 @@ jobs:
           echo "VERSION=${VERSION}" >> $GITHUB_ENV
           echo Using name=$NAME and version=$VERSION
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-
-      - name: Set up Helm
-        uses: azure/setup-helm@v4.2.0
-
       - name: Set up Docker
         uses: docker/setup-buildx-action@v2
-
-      - name: Install Npm dependencies
-        run: npm install
-
-      - name: Run build script
-        run: node build.mjs
-
-      - name: Build Web app
-        run: |
-          cd out
-          zip -r ../$NAME-$VERSION.zip *
-
-      - name: Build Helm package
-        run: helm package ./helm
-
+      
+      - name: Set up Helm
+        uses: azure/setup-helm@v4.2.0
+        
       - name: Build Docker image
         run: |
           docker build -t ghcr.io/${{ github.repository_owner }}/$NAME:$VERSION .
+        
+      - name: Build Helm package
+        run: helm package ./helm
 
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
@@ -72,7 +58,6 @@ jobs:
           prerelease: false
           #body_path: CHANGELOG.md
           files: |
-            *.zip
             *.tgz
 
       - name: Log in to GitHub Container Registry

Dockerfile

@@ -1,13 +1,28 @@
+ARG NODE_VERSION=22
+ARG BUSYBOX_VERSION=1.36.1
 ARG ALPINE_VERSION=3.20
 
-FROM alpine:${ALPINE_VERSION} AS builder
+#################################################################
+####################### NodeJs ##################################
+#################################################################
+FROM node:${NODE_VERSION}-alpine as webapp
 
-ARG BUSYBOX_VERSION=1.36.1
+
+COPY . /webapp
+WORKDIR /webapp
+
+RUN npm install && node build.mjs
+
+##################################################################
+####################### HTTPD ####################################
+##################################################################
+FROM alpine:${ALPINE_VERSION} AS webserver
 
 # Install all dependencies required for compiling busybox
 RUN apk add gcc musl-dev make perl
 
 # Download busybox sources
+ARG BUSYBOX_VERSION
 RUN wget https://busybox.net/downloads/busybox-${BUSYBOX_VERSION}.tar.bz2 \
   && tar xf busybox-${BUSYBOX_VERSION}.tar.bz2 \
   && mv /busybox-${BUSYBOX_VERSION} /busybox
@@ -23,26 +38,25 @@ 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
+##################################################################
+####################### WebApp ###################################
+##################################################################
 FROM scratch
 
 # Copy over the user
-COPY --from=builder /etc/passwd /etc/passwd
-
-# Copy the static binary
-COPY --from=builder /busybox/busybox_HTTPD /httpd
+COPY --from=webserver /etc/passwd /etc/passwd
 
 # Use our non-root user
 USER static
 WORKDIR /home/static
 
-# 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 .
+# Copy webserver files
+COPY --from=webserver --chown=static /busybox/busybox_HTTPD httpd
+# Copy webapp files
+COPY --from=webapp --chown=static /webapp/out .
 
 # port httpd runs on
 EXPOSE 3000
 
 # Run busybox httpd
-CMD ["/httpd", "-f", "-p", "3000"]
+CMD ["/home/static/httpd", "-f", "-p", "3000"]

Makefile

@@ -6,13 +6,14 @@ ARGS = $(foreach a,$($(subst -,_,$1)_args),$(if $(value $a),$a="$($a)"))
 build:
 	npm install
 	node build.mjs
-	docker build -t ${NAME}:latest .
-	@echo "🛠️ - Docker build successful"
 
 serve:
-	npm install
 	node build.mjs serve
 
+docker_build:
+	docker build -t ${NAME}:latest .
+	@echo "🛠️ - Docker build successful"
+
 docker_run: build
 	@docker run --name ${NAME} -dt --rm --init -p ${PORT}:3000 ${NAME}:latest > /dev/null
 	@docker container ls

README.md

@@ -2,67 +2,72 @@
 ![GitHub Release](https://img.shields.io/github/v/release/jamowei/spa-simple)
 
 
-# 😎 WebApp made simple
+# 😎 WebApp made simple 🎉
 Simple WebApp (SPA) using [esbuild](https://esbuild.github.io/), [jsx-dom](https://www.npmjs.com/package/jsx-dom) and [tailwindcss](https://www.npmjs.com/package/tailwindcss)
 
 # 📑 Requirements
-* [NodeJS](https://nodejs.org/) or similar javascript engine
-* [Docker](https://www.docker.com/) or similar container engine
+* [Docker](https://www.docker.com/) for building the image
+* [NodeJS](https://nodejs.org/) for developing the webapp
 * [Helm](https://helm.sh/) for deploying to [Kubernetes](https://kubernetes.io/)
 
 # 🏗️ Structure
 All source-files for the app resides in `./src` folder. 
 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! 😉
 
-# 🛠️ Build App (for Production)
+# 💻 Development
 Just run `make` or following commands
 ```
 npm install
 node build.mjs
-docker build -t ${NAME}:latest .
 ```
-Docker image size is `~114 kB`! 🤯
+This produces all files for the browser inside the `out` folder.
 
-# 💻 Serve App (for Development)
-Just run `make serve` or following commands
+If you want to enable [live-reload](https://esbuild.github.io/api/#live-reload),
+just run `make serve` or
 ```
-npm install
 node build.mjs serve
 ```
 
 # 🐋 Docker
-## Run Docker Container
+## 🐋 Build 🛠️
+Just run `make docker_build` or following commands
+```
+docker build -t ${NAME}:latest .
+```
+Docker image size is `~112 kB`! 🤯
+
+## 🐋 Run
 Just run `make docker_run` or following command
 ```
 docker run --name ${NAME} -dt --rm --init -p ${PORT}:3000 ${NAME}:latest
 ```
 Alternatively, you can also use `docker compose up` to start the container, by using the `./docker-compose.yaml`.
 
-## Stop Docker Container
+## 🐋 Stop
 Just run `make docker_stop` or following command
 ```
 docker container stop ${NAME}
 ```
 
 Or use `docker compose stop` to stop the container, when using the `./docker-compose.yaml`.
 
-## Docker Image Cleanup
+## 🐋 Cleanup 🧹
 Just run `make docker_clean` or following command
 ```
 docker image prune
 ```
 
 # ☸️ Kubernetes
-## Run Kubernetes Pod
+## ☸️ Install
 There is a helm chart provided under `./helm` directory.
 
 Just run `make helm_install` or following command
 ```
 helm upgrade --install --wait --create-namespace --namespace ${NAME} ${NAME} ./helm
 ```
 
-## Stop Kubernetes Pod
+## ☸️ Uninstall
 Just run `make helm_uninstall` or following command
 ```
 helm uninstall --namespace ${NAME} ${NAME}

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "",
   "scripts": {
-    "serve": "node esbuild.mjs"
+    "build": "node esbuild.mjs"
   },
   "repository": {
     "type": "git",