Merge pull request #72 from maykinmedia/feature/build-frontend-in-ci

Build frontend as part of CI

.github/workflows/ci.yml

@@ -73,31 +73,50 @@ jobs:
           working-directory: backend
           files: ./coverage.xml
 
-#  frontend-build:
-#    name: Create 'production' build
-#    runs-on: ubuntu-latest
-#
-#    defaults:
-#      run:
-#        working-directory: frontend
-#
-#    steps:
-#      - uses: actions/checkout@v4
-#      - uses: actions/setup-node@v3
-#        with:
-#          node-version-file: 'frontend/.nvmrc'
-#
-#      - name: Build Javascript
-#        run: |
-#          npm ci --legacy-peer-deps
-#          npm run build
-#
-#      - name: Store build artifact
-#        uses: actions/upload-artifact@v3
-#        with:
-#          name: open-archiefbeheer-frontend-build
-#          path: dist/
-#          retention-days: 1
+  frontend-build:
+    name: Build frontend
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: 'frontend/.nvmrc'
+
+      - name: Build Javascript
+        run: |
+          npm ci --legacy-peer-deps
+          CI=false npm run build 
+
+  frontend-tests:
+    name: Run storybook tests
+    needs: frontend-build
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: 'frontend/.nvmrc'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: npm run build-storybook
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006" \
+            "npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook"
 
   docs:
    name: Build and check documentation
@@ -155,7 +174,7 @@ jobs:
 
       - run: docker image save -o image.tar $IMAGE_NAME:${{ steps.vars.outputs.tag }}
       - name: Store image artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: docker-image
           path: image.tar
@@ -164,18 +183,18 @@ jobs:
   docker_push:
     needs:
       - backend-tests
+      - frontend-build
       - docker_build
 
     name: Push Docker image
     runs-on: ubuntu-latest
     if: github.event_name == 'push' # Exclude PRs
 
     steps:
-      # This will include the updated OAS (if updated) from the update-oas job.
       - uses: actions/checkout@v4
 
       - name: Download built image
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: docker-image
 

frontend/.nvmrc

@@ -0,0 +1 @@
+v20