build: start to rewrite containerized-Makefile logic for docker-compose; restructure frontend build

.babelrc.license

@@ -1,3 +0,0 @@
-SPDX-FileCopyrightText: 2022 Felix Hamann <felix.hamann@campus.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>
-
-SPDX-License-Identifier: AGPL-3.0-or-later

.eslintrc.json.license

@@ -1,3 +0,0 @@
-SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>
-
-SPDX-License-Identifier: AGPL-3.0-or-later

.gitignore

@@ -2,8 +2,10 @@
 dist*
 develop
 node_modules/
-assets/icons
+.npm/
-assets/favicons
+.node_repl_history
+frontend/assets/icons
+frontend/assets/favicons
 bin/
 *.hi
 *.o
@@ -37,22 +39,20 @@ uniworx.nix
 .kateproject
 src/Handler/Assist.bak
 src/Handler/Course.SnapCustom.hs
-frontend/src/env.sass
 *.orig
 /instance
 .stack-work-*
+.stack-work.lock
 .directory
 tags
 test.log
 *.dump-splices
-/.stack-work.lock
-/.npmrc
-/.npm/
 /config/manifest.json
 tunnel.log
-/static
+static
-/well-known
+well-known
-/.well-known-cache
+.well-known-cache
+manifest.json
 /.nix-well-known
 /**/tmp-*
 /testdata/bigAlloc_*.csv

.npmrc.gup.license

@@ -1,3 +0,0 @@
-SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
-
-SPDX-License-Identifier: AGPL-3.0-or-later

Makefile

@@ -69,7 +69,7 @@ help:
 # HELP: stop all running containers and remove all compilation results in the directory (but leave images including dependencies unharmed)
 clean:
 	rm -rf develop
-	-rm -rf node_modules .npm .cache assets/icons assets/favicons static well-known config/manifest.json frontend/src/env.sass
+	-rm -rf frontend/node_modules .npm .cache frontend/assets/icons frontend/assets/favicons frontend/static well-known config/manifest.json frontend/src/env.sass
 	-rm -rf .stack-work .stack-work.lock
 	-rm -rf bin .Dockerfile develop
 	-$(CONTAINER_COMMAND) container prune --force
@@ -224,65 +224,15 @@ shell-%: --act ;
 # HELP(ghci): launch new backend instance and enter interactive ghci shell
 ghci: shell-ghci;
 
---act: --develop_containerized;
-
---develop_%: PORTS = $(foreach PORT,$(BASE_PORTS),$(shell utils/next_free_port.pl $(PORT)))
---develop_%: --ensure-develop
-	DEVELOP=develop/`cat develop/.current` ; \
-	CONTAINER_IDENT=$(CF_PREFIX)$(SERVICE_VARIANT) ; \
-	CONTAINER_FILE=$${DEVELOP}/$${CONTAINER_IDENT} ; \
-	if [[ -e $${CONTAINER_FILE} ]]; then \
-	  >&2 echo "Another $* service is already running! Use \"make new-develop\" to start a new develop instance despite currently running services." ; \
-	  exit 1 ; \
-	fi ; \
-	echo "$(PORTS)" | sed 's/ /\n/g' > $${CONTAINER_FILE} ; \
-	$(MAKE) -- --$* CONTAINER_FILE=$${CONTAINER_FILE} CONTAINER_IDENT=$${CONTAINER_IDENT} JOB=$(JOB)
 
 .PHONY: rebuild-%
 # HELP(rebuild-{backend,frontend,database,memcached,minio}): force-rebuild a given container image
 rebuild-%:
-	$(MAKE) -- --image-build SERVICE=$* NO_CACHE=--no-cache
+	echo "TODO rebuild to be reimplemented"
---image-build:
-ifeq "$(LOCAL_CONTAINERFILE)" "true"
-	rm -f .Dockerfile
-	ln -s docker/$(SERVICE)/Dockerfile .Dockerfile
-	PROJECT_DIR=/fradrive; \
-	if [ "$(IN_CONTAINER)" == "false" ] ; then \
-	  $(CONTAINER_COMMAND) build $(NO_CACHE) \
-	    -v $(PWD):$${PROJECT_DIR}:rw \
-		--build-arg PROJECT_DIR=$${PROJECT_DIR} \
-	    --env IN_CONTAINER=true \
-		--env JOB=$(JOB) \
-		--tag fradrive/$(SERVICE) \
-		--file $(PWD)/.Dockerfile ; \
-	fi
-else
-	:
-endif
 
---containerized: --image-build
+--act:
-	DEVELOP=`cat develop/.current` ; \
+	echo "TODO new act is currently WIP"
-	./utils/watchcontainerrun.sh "$(CONTAINER_COMMAND)" "$(CONTAINER_FILE)" "$(CONTAINER_INIT)" "$(CONTAINER_CLEANUP)" & \
+	docker compose run --remove-orphans $(SERVICE) make -- --$(JOB)-$(SERVICE_VARIANT)
-	CONTAINER_NAME=fradrive.$(CURR_DEV).$(CONTAINER_IDENT) ; \
-	if [ "$(LOCAL_CONTAINERFILE)" = "true" ] ; \
-	  then \
-	    MAKECALL="make -- --$(JOB)-$(SERVICE_VARIANT) IN_CONTAINER=true" ; \
-	fi ; \
-	CONTAINER_ID=`$(CONTAINER_BGRUN) \
-	  -v $(PWD):$(PROJECT_DIR):rw \
-	  --env IN_CONTAINER=true \
-	  --env CONTAINER_FILE=$(CONTAINER_FILE) \
-	  --env CONTAINER_NAME=$${CONTAINER_NAME} \
-	  --env JOB=$(JOB) \
-	  --env SRC=$(SRC) \
-	  --name $${CONTAINER_NAME} \
-	  $(IMAGE) \
-	  $${MAKECALL} \
-	` ; \
-	printf "CONTAINER_ID=$${CONTAINER_ID}" >> "$(CONTAINER_FILE)" ; \
-	if [[ "true" == "$(CONTAINER_ATTACHED)" ]] ; then \
-	  $(CONTAINER_COMMAND) attach $${CONTAINER_ID} || : ; \
-	fi
 
 # For Reverse Proxy Problem see: https://groups.google.com/g/yesodweb/c/2EO53kSOuy0/m/Lw6tq2VYat4J
 # HELP(start-backend): start development instance
@@ -322,31 +272,16 @@ endif
 # uniworx.cabal:
 # 	stack exec -- hpack --force
 
-# HELP(compile-frontend): compile frontend assets
+# HELP(compile-frontend): compile frontend frontend/assets
---compile-frontend: --dependencies-frontend
+--%-frontend:
-	npm run build
+	cd ./frontend && make $*
 --start-frontend: --compile-frontend;
---dependencies-frontend: node_modules assets esbuild.config.mjs frontend/src/env.sass;
+frontend/%:
-node_modules: package.json package-lock.json
+	cd ./frontend && $(MAKE) $*
-	npm install --cache .npm --prefer-offline
+# --lint-frontend: --compile-frontend
-package-lock.json: package.json
+# 	npm run lint
-	npm install --cache .npm --prefer-offline
+# --test-frontend: --compile-frontend
-assets: assets/favicons assets/icons;
+# 	npm run test
-assets/favicons:
-	./utils/faviconize.pl assets/favicon.svg long assets/favicons
-assets/icons: node_modules assets/icons-src/fontawesome.json
-	./utils/renamer.pl node_modules/@fortawesome/fontawesome-free/svgs/solid assets/icons-src/fontawesome.json assets/icons/fradrive
-	./utils/renamer.pl node_modules/@fortawesome/fontawesome-free/svgs/regular assets/icons-src/fontawesome.json assets/icons/fradrive
-	-cp assets/icons-src/*.svg assets/icons/fradrive
-frontend/src/env.sass:
-	echo "\$$path: '$${PROJECT_DIR}'" > frontend/src/env.sass
-static: --dependencies-frontend
-	npm run build
-well-known: static;
---lint-frontend: --compile-frontend
-	npm run lint
---test-frontend: --compile-frontend
-	npm run test
 
 # HELP(compile-uniworxdb): clear and fill database. requires running postgres instance (use "make start-postgres" to start one)
 # TODO (db-m-$MIGRATION-backend): apply migration (see src/Model/Migration/Definition.hs for list of available migrations)

cbt.sh

@@ -1,7 +0,0 @@
-#!/usr/bin/env bash
-
-# SPDX-FileCopyrightText: 2022 Sarah Vaupel <vaupel.sarah@campus.lmu.de>
-#
-# SPDX-License-Identifier: AGPL-3.0-or-later
-
-cbt_tunnels --username $CBT_USERNAME --authkey $CBT_AUTHKEY

compose.yaml

@@ -1,35 +1,64 @@
 services:
   frontend:
-    # image: registry.uniworx.de/fradrive/fradrive/frontend # TODO: reference to current branch required; how to do that here?
-    # pull_policy: if_not_present
     build:
-      dockerfile: ./docker/frontend/Dockerfile
+      context: ./frontend
-      context: .
+      dockerfile: ./Dockerfile
     environment:
-      - PROJECT_DIR=/fradrive
+      - PROJECT_DIR=/fradrive/frontend
     volumes:
-      - &fradrive-mnt .:/tmp/fradrive
+      - type: bind
+        source: ./Makefile
+        target: /fradrive/Makefile
+      - type: bind
+        source: ./frontend
+        target: /fradrive/frontend
+
   backend:
     # image: registry.uniworx.de/fradrive/fradrive/backend
     # pull_policy: if_not_present
     build:
       dockerfile: ./docker/backend/Dockerfile
       context: ./
-    volumes:
+    volumes: []
-      - *fradrive-mnt
     depends_on:
       - frontend
+      - postgres
+      - memcached
+      - minio
+      - maildev
+    ports:
+      - "3000:3000" # dev http
+      - "3443:3443" # dev https
+      - "8081:8081" # hoogle
+    links:
+      - postgres
+      - memcached
+      - minio
+      - maildev
     stdin_open: true
-  database:
+
-    # image: registry.uniworx.de/fradrive/fradrive/database
+  postgres:
-    # pull_policy: if_not_present
+    image: docker.io/library/postgres:12
+    pull_policy: if_not_present
     build: ./docker/database
     ports:
-      - "9876:5432"
+      - "5432:5432"
     # privileged: true
 
-#     driver: local
+  memcached:
-#     driver_opts:
+    image: docker.io/library/memcached:latest
-#       type: none
+    pull_policy: if_not_present
-#       o: bind
+    ports:
-#       device: ./
+      - "11211:11211"
+
+  minio:
+    image: docker.io/minio/minio:latest
+    pull_policy: if_not_present
+    ports:
+      - "9000:9000"
+
+  maildev:
+    image: docker.io/maildev/maildev:latest
+    pull_policy: if_not_present
+    ports:
+      - "1025:1025"

frontend/Makefile

@@ -0,0 +1,23 @@
+.PHONY: all
+all: dependencies compile ;
+.PHONY: dependencies
+dependencies: node_modules assets ;
+.PHONY: compile
+compile: static well-known ;
+
+node_modules: package.json package-lock.json
+	npm install --cache .npm --prefer-offline
+package-lock.json: package.json
+	npm install --cache .npm --prefer-offline
+static: node_modules assets esbuild.config.mjs jsconfig.json postcss.config.js
+	echo "$${PROJECT_DIR}"
+	npm run build
+well-known: static ;
+
+assets: assets/favicons assets/icons;
+assets/favicons:
+	./utils/faviconize.pl assets/favicon.svg long assets/favicons
+assets/icons: node_modules assets/icons-src/fontawesome.json
+	./utils/renamer.pl node_modules/@fortawesome/fontawesome-free/svgs/solid assets/icons-src/fontawesome.json assets/icons/fradrive
+	./utils/renamer.pl node_modules/@fortawesome/fontawesome-free/svgs/regular assets/icons-src/fontawesome.json assets/icons/fradrive
+	-cp assets/icons-src/*.svg assets/icons/fradrive

frontend/esbuild.config.mjs

@@ -20,8 +20,8 @@ await esbuild.build({
   minify: true,
   sourcemap: true,
   entryPoints: {
-    main: './frontend/src/main.js',
+    main: './src/main.js',
-    polyfill: './frontend/src/polyfill.js',
+    polyfill: './src/polyfill.js',
   },
   outdir: staticDir,
   plugins: [
@@ -48,14 +48,14 @@ await esbuild.build({
     copy({
       resolveFrom: 'cwd',
       assets: {
-        from: [ './config/robots.txt' ],
+        from: [ './robots.txt' ],
         to: wellKnownDirs,
       },
     }),
     // ...['de-de-formal','en-eu'].map((lang) => manifestPlugin({
     manifestPlugin({
       filename: 'manifest.json',
-      path: 'config',
+      path: '.',
       // metadata: { timestamp: new Date(), module: 'myapp', type: 'esm', },
       processOutput(assets) {
         const orderAssets = {

frontend/src/icons.scss

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
 
-@import 'env';
+// @import 'env';
 
 $ico-width: 30px;
 
@@ -103,7 +103,7 @@ $icons: new,
 
 @each $name in $icons {
   .ico-#{$name} {
-    background-image: url('#{$path}/assets/icons/fradrive/#{$name}.svg');
+    background-image: url('/fradrive/frontend/assets/icons/fradrive/#{$name}.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;