Further improvements

.dockerignore

@@ -1 +1,12 @@
-node_modules
+node_modules
+npm-debug.log*
+.git
+.gitignore
+README.md
+.env
+coverage
+.eslintcache
+dist
+
+# Public data directory (terrain, tilesets)
+public/data

.github/workflows/ci.yml

@@ -68,13 +68,27 @@ jobs:
           sleep 10
           docker ps -a
 
-      - name: Check if container is running
+      - name: Check if container is running and app responds with HTTP 200
         run: |
           if ! docker ps | grep test-container; then
             echo "Container failed to start."
             exit 1
           fi
 
+          for i in {1..30}; do
+            http_status=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/worldmap_3d)
+            if [ "$http_status" -eq 200 ]; then
+              echo "Service is up and responded with HTTP 200."
+              exit 0
+            else
+              echo "Waiting for service... (HTTP $http_status)"
+              sleep 1
+            fi
+          done
+
+          echo "Service did not respond with HTTP 200 in time."
+          exit 1
+
       - name: Clean up Docker
         run: |
           docker rm -f test-container || true

.gitignore

@@ -62,3 +62,6 @@ typings/
 
 # dist
 dist/
+
+# public data directory
+public/data/

Dockerfile

@@ -1,14 +1,22 @@
 FROM node:22-alpine AS builder
-
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm install
 COPY . .
 RUN npm run build
 
-FROM nginx:alpine
-COPY dist/ /usr/share/nginx/html
-RUN rm /etc/nginx/conf.d/default.conf
-COPY nginx.conf /etc/nginx/conf.d
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+FROM node:22-alpine
+RUN apk add --no-cache nginx
+COPY --from=builder /app/dist /usr/share/nginx/html
+RUN rm /etc/nginx/http.d/default.conf
+COPY nginx.conf /etc/nginx/http.d/
+WORKDIR /app/server
+COPY server/package.json server/package-lock.json ./
+RUN npm install --only=production
+COPY server/server.js ./
+RUN mkdir -p /usr/share/nginx/html/data
+COPY start.sh /start.sh
+RUN chmod +x /start.sh
+
+EXPOSE 80 3001
+CMD ["/start.sh"]

README.md

@@ -27,7 +27,7 @@
 
 The purpose of this application is a short demonstration of possibilities and a selection of applications in the 3D context.
 
-## Start by npm
+## Development
 
 Start the app with
 
@@ -45,8 +45,25 @@ npm run preview
 
 Navigate to [localhost:5173](http://localhost:5173). For the built version navigate to [localhost:4173](http://localhost:4173).
 
-## Start build by docker
+## Docker Deployment
 
-`docker build -t nexus.terrestris.de/mholthausen/worldmap_3d .`  
-`docker run -p 8080:80 nexus.terrestris.de/mholthausen/worldmap_3d`  
-open [http://localhost:8080](http://localhost:8080)
+**Note:** The Docker setup has been updated to include both frontend and backend services, with external data volume mounting.
+
+For detailed Docker deployment instructions, see [DOCKER.md](./DOCKER.md).
+
+### Quick Start
+
+```bash
+# Using Docker Compose (recommended)
+docker-compose up --build
+
+# Manual build (legacy - data volume required)
+docker build -t nexus.terrestris.de/mholthausen/worldmap_3d .
+docker run -p 8080:80 -p 3001:3001 \
+  -v $(pwd)/public/data:/usr/share/nginx/html/data:ro \
+  nexus.terrestris.de/mholthausen/worldmap_3d
+```
+
+Open [http://localhost:8080](http://localhost:8080)
+
+**Important:** The `public/data` directory is no longer included in Git and must be mounted as a volume. See [DOCKER.md](./DOCKER.md) for setup details.

TODO.md

@@ -0,0 +1,6 @@
+# To Do's
+
+[ ] Cesium ION Key via env?
+[ ] transform to typescript
+[ ] simple unit tests
+[ ] More content Features?

docker-compose.yml

@@ -0,0 +1,26 @@
+version: '3.8'
+
+services:
+  worldmap-3d:
+    build: .
+    ports:
+      - "8080:80" # client
+      - "3001:3001" # backend
+    volumes:
+      - ./public/data:/usr/share/nginx/html/data:ro
+    environment:
+      - DB_HOST=${DB_HOST}
+      - DB_PORT=${DB_PORT}
+      - DB_NAME=${DB_NAME}
+      - DB_USER=${DB_USER}
+      - DB_PASSWORD=${DB_PASSWORD}
+      - PORT=${PORT}
+    networks:
+      - citydb-net
+    depends_on:
+      - database
+    restart: unless-stopped
+
+networks:
+  citydb-net:
+    driver: bridge

eslint.config.mjs

@@ -1,6 +1,8 @@
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import babelParser from '@babel/eslint-parser';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
 
 export default [
   {
@@ -29,5 +31,28 @@ export default [
     rules: {
       // additional rules can be added here
     }
+  },
+  {
+    files: ['src/**/*.ts', 'src/**/*.tsx'],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true
+        },
+        project: './tsconfig.json'
+      }
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      '@typescript-eslint': typescriptEslint
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    }
   }
 ];

index.html

@@ -23,15 +23,14 @@
       href="img/favicon_io/favicon-16x16.png"
     />
     <link rel="manifest" href="img/favicon_io/site.webmanifest" />
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
     <title></title>
   </head>
 
   <body>
     <header></header>
     <main>
       <div id="root" class="container"></div>
-      <!-- <div id="cesiumContainer"></div> -->
     </main>
     <footer id="footer"></footer>
   </body>

nginx.conf

@@ -8,17 +8,36 @@ server {
     try_files $uri $uri/ /index.html;
   }
 
+  # Proxy API requests to backend
+  location /api/ {
+    proxy_pass http://localhost:3001;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection 'upgrade';
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_cache_bypass $http_upgrade;
+  }
+
   error_page   500 502 503 504  /50x.html;
 
   location = /50x.html {
     root   /usr/share/nginx/html;
   }
 
+  # Proper MIME types for JavaScript modules
+  location ~* \.m?js$ {
+    root   /usr/share/nginx/html;
+    add_header Content-Type application/javascript;
+  }
+
   gzip on;
   gzip_vary on;
   gzip_min_length 10240;
   gzip_proxied expired no-cache no-store private auth;
-  gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
+  gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
   gzip_disable "MSIE [1-6]\.";
 
 }