CI: Refactor workflow file to build and publish Documentation website…

… and Storybook simultaneously (#1258)

* CI: Refactor workflow file to build and publish docs and Storybook simultaneously

* fix: Move base path configuration to `main.js`

* refactor: Update base path configuration in `.storybook/main.js`

* fix: Insert correct link to storybook

* refactor: Update documentation workflow to use separate `docs-pages` directory for generated pages

* refactor: Update documentation workflow to use separate `docs-pages` directory for generated pages

* docs: Scaffold ER/MKDOCS build step

* refactor: Replace dummy `index.html` by actual `mkdocs` build step

* refactor: Update documentation workflow to use Docker for building MKDOCS site

* refactor: Don't use environment file as we likely don't even need it

* refactor: Update documentation workflow to use local installation of mkdocs

* refactor: Change working directory

* refactor: Use correct build folder & copy build files to artifact folder

* fix: Fix path to mkdocs pages

* refactor: Enable deployment of GitHub Pages on the develop branch

.github/workflows/storybook.yml → .github/workflows/docs.yml

@@ -1,4 +1,4 @@
-name: Build & Publish Storybook
+name: Build & Publish Docs & Storybook
 
 on:
   push:
@@ -7,13 +7,13 @@ on:
       - develop
     paths:
       - 'frontend/**'
-      - '.github/workflows/storybook.yml'
+      - '.github/workflows/docs.yml'
       - '.yarn/**'
       - '.storybook/**'
   pull_request:
     paths:
       - 'frontend/**'
-      - '.github/workflows/storybook.yml'
+      - '.github/workflows/docs.yml'
       - '.yarn/**'
       - '.storybook/**'
 
@@ -27,23 +27,34 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
+      - name: Build ER/MKDOCS site
+        run: |
+          mkdir -p docs-pages
+          sudo docker compose --env-file .env-github-actions run server bash -c "mkdocs build -d ./docs-pages-build"
+          cp -r ./backend/docs-pages-build/* ./docs-pages
+
       - name: Install dependencies
         run: yarn
         working-directory: ./frontend
+
       - name: Build Storybook
-        run: yarn storybook:build
+        run: yarn storybook:build --output-dir ../docs-pages/storybook
         working-directory: ./frontend
+
       - name: Setup Github Pages
         uses: actions/configure-pages@v2
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: ./frontend/storybook-static
+          path: ./docs-pages
+
       - name: Archive production artifacts
         uses: actions/upload-artifact@v3
         with:
           name: build
-          path: ./frontend/storybook-static
+          path: ./docs-pages
 
   deploy-gh-pages:
     # only deploy on develop branch

frontend/.storybook/main.js

@@ -30,6 +30,7 @@ const config = {
 
     viteFinal: (config) => {
         return mergeConfig(config, {
+            base: "/MUSCLE/storybook/",
             resolve: {
                 alias: {
                     '@/': '/src/',