Simplify demo - remove nginx (#692)

This uses the webserver built into vitejs instead of configuring an
entirely new nginx server with an additional docker image.

demo/docker-compose.yml

@@ -6,14 +6,18 @@ services:
       context: ./frontend
       dockerfile: Dockerfile
     restart: unless-stopped
+    command: ["npm", "run", "preview"]
     depends_on:
       - tiles
     ports:
-      - "80:80"
+      - "80:8080"
 
   tiles:
-    image: urbica/martin
+    image: ghcr.io/maplibre/martin 
+    # For Arm64 - you have to build your own image from source https://github.com/maplibre/martin/issues/655#issuecomment-1540669505
     restart: unless-stopped
+    ports:
+      - "3000:3000"
     environment:
       - DATABASE_URL=postgres://postgres@db/db
     depends_on:

demo/frontend/Dockerfile

@@ -4,7 +4,3 @@ WORKDIR /usr/src/app
 COPY . .
 RUN npm i
 RUN npm run build
-
-FROM nginx:alpine
-COPY nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder "/usr/src/app/dist" /usr/share/nginx/html

demo/frontend/nginx.conf

@@ -1,89 +0,0 @@
-user nginx;
-worker_processes auto;
-worker_cpu_affinity auto;
-pid /run/nginx.pid;
-
-events {
-    worker_connections 4086;
-    use epoll;
-    multi_accept on;
-}
-
-http {
-    sendfile on;
-    tcp_nopush on;
-    tcp_nodelay on;
-    keepalive_timeout 65;
-    keepalive_requests 1000;
-    types_hash_max_size 2048;
-
-    include /etc/nginx/mime.types;
-    default_type application/octet-stream;
-
-    access_log /var/log/nginx/access.log;
-    error_log /var/log/nginx/error.log;
-
-    gzip              on;
-    gzip_vary         on;
-    gzip_proxied      any;
-    gzip_comp_level   6;
-    gzip_buffers      16 8k;
-    gzip_http_version 1.1;
-    gzip_min_length   256;
-    gzip_types        text/plain text/css text/xml text/javascript application/x-javascript application/xml
-                      application/javascript application/json application/x-protobuf;
-
-    proxy_cache_path    /var/cache/nginx/
-                        levels=1:2
-                        max_size=10g
-                        inactive=60m
-                        use_temp_path=off
-                        keys_zone=backend_cache:10m;
-
-    upstream tiles_upstream {
-        server tiles:3000;
-    }
-
-    server {
-        
-        listen              80;
-
-        server_name localhost martin.maplibre.org maplibre.org cloudflare.com;
-        resolver 127.0.0.1;
-        
-        location / {
-            root      /usr/share/nginx/html;
-            try_files $uri /index.html;
-        }
-
-        location ~ /tiles/(?<fwd_path>.*) {
-            proxy_set_header        Host $host;
-            proxy_set_header        X-Forwarded-Proto "http";
-            proxy_set_header        X-Real-IP $remote_addr;
-            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header        X-Forwarded-Host $host;
-            proxy_set_header        X-Rewrite-URL $uri;
-            proxy_redirect          off;
-
-            proxy_connect_timeout   5m;
-            proxy_send_timeout      5m;
-            proxy_read_timeout      5m;
-            send_timeout            5m;
-
-            proxy_cache             backend_cache;
-            proxy_cache_lock        on;
-            proxy_cache_revalidate  on;
-            proxy_cache_valid       200 204 302 1d;
-            proxy_cache_valid       404 1m;
-            proxy_cache_use_stale   error timeout http_500 http_502 http_503 http_504;
-            add_header              X-Cache-Status $upstream_cache_status;
-
-            proxy_pass              http://tiles_upstream/$fwd_path$is_args$args;
-        }
-
-        error_page 500 502 503 504 /50x.html;
-        location = /50x.html {
-          root /usr/share/nginx/html;
-        }
-    }
-}

demo/frontend/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite --port 3000 --host",
+    "dev": "vite --port 8080 --host",
     "build": "tsc && vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --port 8080 --host",
     "lint": "eslint src"
   },
   "eslintConfig": {

demo/frontend/src/Components/Development/Development.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import Container from './Container';
 import Title from './Title';
 import GitHubButton from '../GitHubButton';
+import DocsButton from '../GitHubButton/DocsButton';
 
 const Development = () => (
   <Container>
     <Title>Start building with Martin!</Title>
-    <GitHubButton />
+    <GitHubButton />{' '}
+    <DocsButton />
   </Container>
 );
 

demo/frontend/src/Components/GitHubButton/DocsButton.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import octocat from './octocat.svg';
+import Container from './Container';
+
+const DocsButton = () => (
+  <Container href='https://maplibre.org/martin' target='_blank'>
+    <span>Documentation</span>
+  </Container>
+);
+
+export default DocsButton;

demo/frontend/src/Components/Intro/Intro.tsx

@@ -5,13 +5,15 @@ import Container from './Container'
 import Title from './Title'
 import Description from './Description'
 import GitHubButton from '../GitHubButton'
+import DocsButton from '../GitHubButton/DocsButton'
 
 const Intro = () => (
   <Container>
     <Parallax translateY={[100, -50]}>
-      <Title>Martin</Title>
+      <Title>Martin<br />Demo</Title>
       <Description>Vector Tiles from Large Databases on the Fly</Description>
-      <GitHubButton />
+      <GitHubButton />{' '}
+      <DocsButton />
     </Parallax>
   </Container>
 )

demo/frontend/src/Components/Map/Map.tsx

@@ -30,6 +30,7 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
 
   componentDidMount() {
     this.map = new maplibregl.Map({
+      cooperativeGestures: true,
       container: 'map',
       style: MAP_STYLE,
       center: [-74.005308, 40.713370],
@@ -38,14 +39,14 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
     });
     this.nav = new maplibregl.NavigationControl();
 
-    this.map.scrollZoom.disable();
+    
     this.map.addControl(this.nav, 'top-right');
     this.map.on('load', this.mapOnLoad);
   }
 
   componentDidUpdate() {
     const queryParams = this.getQueryParams();
-    const newStyleUrl = `/tiles/rpc/public.get_trips.json?${queryParams}`;
+    const newStyleUrl = `http://localhost:3000/get_trips?${queryParams}`;
     const newStyle = this.map.getStyle();
 
     newStyle.sources['public.get_trips'].url = newStyleUrl;
@@ -57,7 +58,7 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> {
 
     this.map.addSource('public.get_trips', {
       type: 'vector',
-      url: `/tiles/rpc/public.get_trips.json?${queryParams}`
+      url: `http://localhost:3000/get_trips?${queryParams}`
     });
     layers.forEach(({ mapboxLayer }) => {
       this.map.addLayer(mapboxLayer, 'place_town');

demo/frontend/vite.config.ts

@@ -1,16 +1,18 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react'
 import mkcert from 'vite-plugin-mkcert'
-import { resolve } from 'path'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
-import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [react(), viteTsConfigPaths({
+  plugins: [
+    react(),
+    viteTsConfigPaths({
       root: './',
-  }), mkcert()],
+    }),
+    mkcert(),
+  ],
   build: {
     target: 'esnext',
-    
   },
-  server: { https: true },
+  server: { https: false, host: true, port: 8080 },
-});
+})