Feature/#261154 vite migration

.ddev/commands/web/build-fe

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-cd src/Resources && yarn && yarn build
+cd src/Resources && npm install && npm run build-only

.ddev/config.yaml

@@ -36,6 +36,12 @@ web_environment:
     - MERCURE_PUBLIC_URL=https://meals.test:8081/.well-known/mercure
 nodejs_version: "22"
 
+web_extra_exposed_ports:
+    - name: vite
+      container_port: 5173
+      http_port: 5172
+      https_port: 5173
+
 # Key features of DDEV's config.yaml:
 
 # name: <projectname> # Name of the project, automatically provides
@@ -242,11 +248,11 @@ nodejs_version: "22"
 # The default time that DDEV waits for all containers to become ready can be increased from
 # the default 120. This helps in importing huge databases, for example.
 
-#web_extra_exposed_ports:
-#- name: nodejs
-#  container_port: 3000
-#  http_port: 2999
-#  https_port: 3000
+# web_extra_exposed_ports:
+#     - name: vue-frontend
+#       container_port: 5173
+#       http_port: 5173
+#       https_port: 5173
 #- name: something
 #  container_port: 4000
 #  https_port: 4000

.ddev/docker-compose.override.yaml

@@ -2,4 +2,5 @@ services:
   web:
     ports:
       - "1337:1337"
-      - "2122:22"
+      - "2122:22"
+      # - "127.0.0.1:5173:5173"

.env

@@ -25,6 +25,8 @@ APP_ENV=dev
 APP_SECRET=98414ca3612ebba3061cf8c92c4a984e
 ###< symfony/framework-bundle ###
 
+VITE_DEV_SERVER_URL=http://localhost:5173
+
 ###> doctrine/doctrine-bundle ###
 # Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
 # IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
@@ -76,4 +78,4 @@ SETTLEMENT_REQ_EMAIL_RECEIVER=jon.doe@localhost
 
 # PayPal integration
 PAYPAL_ID=
-PAYPAL_SECRET=
+PAYPAL_SECRET=

.github/workflows/main.yml

@@ -46,13 +46,13 @@ jobs:
         uses: actions/cache@v4
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Install npm packages
         working-directory: ./src/Resources
-        run: yarn install
+        run: npm install
       - name: Run FE linters
         working-directory: ./src/Resources
-        run: yarn lint
+        run: npm run lint
 
   format:
     name: FE asset formatting check
@@ -65,13 +65,13 @@ jobs:
         uses: actions/cache@v4
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Install npm packages
         working-directory: ./src/Resources
-        run: yarn install
+        run: npm install
       - name: Run prettier check
         working-directory: ./src/Resources
-        run: yarn prettier-check
+        run: npm run format-check
 
   phpmd:
     name: PHPMD
@@ -105,6 +105,25 @@ jobs:
       - name: Run Psalm
         run: ./vendor/bin/psalm
 
+  vueTsc:
+    name: Run frontend type check
+    runs-on: ubuntu-latest
+    continue-on-error: false
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
+      - name: Install npm packages
+        working-directory: ./src/Resources
+        run: npm install
+      - name: Run vue-tsc
+        working-directory: ./src/Resources
+        run: npm run type-check
+
   testFrontendUnitFunctional:
     name: Run frontend unit- and functional-tests
     runs-on: ubuntu-latest
@@ -116,18 +135,18 @@ jobs:
         uses: actions/cache@v4
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Install npm packages
         working-directory: ./src/Resources
-        run: yarn install
-      - name: Run FE jest suite
+        run: npm install
+      - name: Run FE vitest suite
         working-directory: ./src/Resources
-        run: yarn test
+        run: npm run test:unit
 
   buildDevImage:
     name: Build Development Docker Images
     runs-on: ubuntu-latest
-    needs: [ test-cgl, psalm, phpmd, format, lint, testFrontendUnitFunctional ]
+    needs: [ test-cgl, psalm, phpmd, format, lint, vueTsc, testFrontendUnitFunctional ]
     steps:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -187,7 +206,7 @@ jobs:
   buildImages:
     name: Build Docker Images
     runs-on: ubuntu-latest
-    needs: [ test-cgl, psalm, phpmd, format, lint, testFrontendUnitFunctional ]
+    needs: [ test-cgl, psalm, phpmd, format, lint, vueTsc, testFrontendUnitFunctional ]
     steps:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -277,10 +296,10 @@ jobs:
         uses: actions/cache@v4
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
       - name: Install npm packages
         working-directory: ./src/Resources
-        run: yarn install
+        run: npm install
       - name: Make build dir
         run: |
           mkdir build

.gitignore

@@ -12,6 +12,7 @@ node_modules
 !.dockerignore
 !.env
 !.env.test
+!.eslintrc.cjs
 !.gitlab-ci.yml
 !.gitkeep
 !.stylelintrc.json
@@ -55,3 +56,8 @@ src/Resources/style/output.css.map
 ###> phpstan/phpstan ###
 phpstan.neon
 ###< phpstan/phpstan ###
+
+###> pentatrion/vite-bundle ###
+/node_modules/
+/public/build/
+###< pentatrion/vite-bundle ###

Dockerfile

@@ -5,11 +5,11 @@ RUN apt-get update \
         build-essential \
         nodejs
 WORKDIR var/www/html/src/Resources
-COPY src/Resources/package.json src/Resources/yarn.lock ./
-RUN yarn install
+COPY src/Resources/package.json src/Resources/package-lock.json ./
+RUN npm install
 COPY src/Resources/ .
 COPY public .
-RUN NODE_ENV=production yarn run build
+RUN NODE_ENV=production npm run build
 
 # build production container
 FROM php:8.3-fpm-alpine

Makefile

@@ -7,25 +7,25 @@ help:
 	@echo "Available helper commands:"
 	@echo ""
 	@echo "	build              - Build an image from the Dockerfile"
-	@echo "	build-yarn         - (Re-)build production ready frontend assets i.e. CSS, JS"
-	@echo "	build-yarn-dev     - (Re-)build development ready frontend assets i.e. JS"
-	@echo "	build-yarn-dev-css - (Re-)build development ready frontend assets i.e. CSS, JS"
-	@echo "	build-yarn-watch   - (Re-)build and watch development ready frontend assets i.e. CSS, JS"
+	@echo "	build-vite         - (Re-)build production ready frontend assets i.e. CSS, JS"
+	@echo "	build-vite-dev     - (Re-)build and watch development ready frontend assets i.e. CSS, JS"
 	@echo "	create-migration   - Create Doctrine migration from code"
 	@echo "	get-users          - Get test users and their passwords"
 	@echo "	load-testdata      - Load test data i.e. dishes, meals and users"
 	@echo "	poweroff           - Stop all related containers and projects"
 	@echo "	run-devbox         - Run devbox"
-	@echo "	run-lint           - Run code linter"
+	@echo "	run-lint           - Run code frontend linter (eslint)"
+	@echo " run-typecheck      - Run frontend type check"
 	@echo "	run-prettier-check - Run prettier with the check option"
 	@echo "	run-prettier       - Run prettier to format frontend files"
 	@echo "	run-cs-fixer       - Run Coding Standards Fixer"
 	@echo "	run-phpmd          - Run PHP Mess Detector"
 	@echo "	run-psalm          - Run static code analysis"
 	@echo "	run-tests-be       - Run backend-tests"
-	@echo "	run-tests-fe       - Run frontend-tests"
+	@echo "	run-tests-fe       - Run frontend-unit-tests"
 	@echo " run-cypress        - Run cypress"
 	@echo " run-cypress-headless - Run cypress headless"
+	@echo " run-cypress-headless-specific - Run one specific cypress test (needs to be adjusted in command)"
 	@echo "	ssh                - Open a bash session in the web container"
 	@echo "	update-schema      - Update the Doctrine schema"
 	@echo "	mailhog            - Open MailHog in the browser"
@@ -38,26 +38,26 @@ build:
 		--tag aoepeople/meals:edge \
 		.
 
-build-yarn:
-	ddev exec yarn --cwd=src/Resources build
+build-vite:
+	ddev exec npm run --prefix src/Resources build-only
 
-build-yarn-dev:
-	ddev exec yarn --cwd=src/Resources build-dev
+build-vite-check:
+	ddev exec npm run --prefix src/Resources build
 
-build-yarn-dev-css:
-	ddev exec yarn --cwd=src/Resources build-dev-css
-
-build-yarn-watch:
-	ddev exec yarn --cwd=src/Resources build-watch
+build-vite-dev:
+	ddev exec npm run --prefix src/Resources dev
 
 run-lint:
-	ddev exec yarn --cwd src/Resources lint
+	ddev exec npm run --prefix src/Resources lint
+
+run-typecheck:
+	ddev exec npm run --prefix src/Resources type-check
 
 run-prettier-check:
-	ddev exec yarn --cwd src/Resources prettier-check
+	ddev exec npm run --prefix src/Resources format-check
 
 run-prettier:
-	ddev exec yarn --cwd src/Resources prettier
+	ddev exec npm run --prefix src/Resources format
 
 run-phpmd:
 	ddev exec vendor/bin/phpmd src/Mealz text ./phpmd.xml --baseline-file ./phpmd.baseline.xml --exclude */Tests/*
@@ -81,14 +81,17 @@ run-tests-be:
 	ddev run tests
 
 run-tests-fe:
-	ddev exec yarn --cwd=src/Resources test
+	ddev exec npm run --prefix src/Resources test:unit
 
 run-cypress:
 	yarn --cwd=./tests/e2e cypress open
 
 run-cypress-headless:
 	yarn --cwd=./tests/e2e cross-env-shell cypress run --headless --browser electron --env "baseUrl=https://meals.test/"
 
+run-cypress-headless-specific:
+	yarn --cwd=./tests/e2e cross-env-shell cypress run --headless --browser electron --env "baseUrl=https://meals.test/" --spec './cypress/e2e/MenuParticipations.cy.ts'
+
 ssh:
 	ddev ssh
 

README.md

@@ -203,6 +203,11 @@ make run-psalm
 
 ## Developer information
 
+### Vite
+
+Vite has two different modes of operation. One where a production ready build is generated and a dev mode. The dev mode is best used to quickly iterate and rebuild over changes while working.
+
+
 ### User roles
 
 The following roles are in use:
@@ -223,6 +228,10 @@ IDP_CLIENT_ID=client-id
 IDP_CLIENT_SECRET=client-secret
 ```
 
+### Dev Warning
+
+In the Vite Dev mode browsers will typically send out a Warning("Source-Map-Fehler: No sources are declared in this source map."). This can be mitigated by using the build mode.
+
 ### API Error Messages
 *MealAdminController 1xx*
   * 101: Invalid JSON was received

composer.json

@@ -25,6 +25,7 @@
     "hwi/oauth-bundle": "^2.2.0",
     "lcobucci/jwt": "^5.3",
     "paypal/paypal-checkout-sdk": "^1.0.0",
+    "pentatrion/vite-bundle": "^6.4",
     "psr/cache": "^3.0.0",
     "psr/container": "^1.0",
     "psr/link": "^1.0",