Fix #145 working on integration of nextjs (vercel) into the project

Author: danionescu0

.github/workflows/test_build.yml

@@ -10,4 +10,4 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v1
       - name: Test
-        run: docker network create project-network && docker-compose build && docker-compose up --exit-code-from web-test
+        run: docker network create project-network && docker-compose build && docker compose up --exit-code-from web-test

.gitignore

@@ -1,4 +1,5 @@
 \.idea
 \docker-python/project/base
+\docker-nextjs/.next
 python_app.log
 *.pyc

docker-compose.yml

@@ -213,78 +213,87 @@ services:
         depends_on:
             - mongo
 
-    # A virtual book library
-    web-book-collection:
-        build:
-            context: ./docker-python
-            args:
-                requirements: /root/flask-mongodb-example/python/bookcollection/requirements.txt
-        environment:
-             - PYTHONUNBUFFERED=1
+    web-photo-process-ui:
+        build: ./docker-nextjs
         ports:
-            - "86:5000"
-        entrypoint: python /root/flask-mongodb-example/python/bookcollection/bookcollection.py
-        depends_on:
-            - mongo
-            - web-users
-
-    # Wame functionality as web-users but build with fastapi
-    # runs with gunicorn on two processor cores [-w 2]
-    web-users-fast-api:
-        build:
-            context: ./docker-python
-            args:
-                requirements: /root/flask-mongodb-example/python/fastapidemo/requirements.txt
-        ports:
-            - "88:5000" # port 87 is restricted in browsers
-        entrypoint: gunicorn -w 2 -k uvicorn.workers.UvicornH11Worker --chdir /root/flask-mongodb-example/python/fastapidemo --bind 0.0.0.0:5000 --log-level debug users-fastapi:app
+          - "3001:3000"
+        environment:
+          - NEXT_PUBLIC_API_URL=http://localhost:85
         depends_on:
-            - mongo
+          - web-photo-process
 
-    # A two player tic tac toe game written in flask using flask_session. It has a simple UI
-    web-tictactoe:
-        build:
-            context: ./docker-python
-            args:
-                requirements: /root/flask-mongodb-example/python/requirements.txt
-        ports:
-            - "89:5000"
-        entrypoint: python /root/flask-mongodb-example/python/tictactoe/tictactoe.py
-
-
-    # GraphQl implementation of CRUD users
-    web-users-graphql:
-        build:
-            context: ./docker-python
-            args:
-                requirements: /root/flask-mongodb-example/python/graphql/requirements.txt
-        ports:
-            - "90:5000"
-        entrypoint: python /root/flask-mongodb-example/python/graphql/users.py
-
-    # Used to test build of services
-    web-test:
-        image: alpine
-        depends_on:
-            - web-random
-            - web-random-pypy
-            - web-users
-            - background-mqtt
-            - web-fulltext-search
-            - web-geolocation-search
-            - web-baesian
-            - web-photo-process
-            - web-book-collection
-            - web-users-fast-api
-            - web-users-graphql
-            - influxdb
-            - chronograf
-            - grafana
-            - mongo
-            - mqtt
-            - krakend
-            - web-tictactoe
-            - redis
+#    # A virtual book library
+#    web-book-collection:
+#        build:
+#            context: ./docker-python
+#            args:
+#                requirements: /root/flask-mongodb-example/python/bookcollection/requirements.txt
+#        environment:
+#             - PYTHONUNBUFFERED=1
+#        ports:
+#            - "86:5000"
+#        entrypoint: python /root/flask-mongodb-example/python/bookcollection/bookcollection.py
+#        depends_on:
+#            - mongo
+#            - web-users
+#
+#    # Wame functionality as web-users but build with fastapi
+#    # runs with gunicorn on two processor cores [-w 2]
+#    web-users-fast-api:
+#        build:
+#            context: ./docker-python
+#            args:
+#                requirements: /root/flask-mongodb-example/python/fastapidemo/requirements.txt
+#        ports:
+#            - "88:5000" # port 87 is restricted in browsers
+#        entrypoint: gunicorn -w 2 -k uvicorn.workers.UvicornH11Worker --chdir /root/flask-mongodb-example/python/fastapidemo --bind 0.0.0.0:5000 --log-level debug users-fastapi:app
+#        depends_on:
+#            - mongo
+#
+#    # A two player tic tac toe game written in flask using flask_session. It has a simple UI
+#    web-tictactoe:
+#        build:
+#            context: ./docker-python
+#            args:
+#                requirements: /root/flask-mongodb-example/python/requirements.txt
+#        ports:
+#            - "89:5000"
+#        entrypoint: python /root/flask-mongodb-example/python/tictactoe/tictactoe.py
+#
+#
+#    # GraphQl implementation of CRUD users
+#    web-users-graphql:
+#        build:
+#            context: ./docker-python
+#            args:
+#                requirements: /root/flask-mongodb-example/python/graphql/requirements.txt
+#        ports:
+#            - "90:5000"
+#        entrypoint: python /root/flask-mongodb-example/python/graphql/users.py
+#
+#    # Used to test build of services
+#    web-test:
+#        image: alpine
+#        depends_on:
+#            - web-random
+#            - web-random-pypy
+#            - web-users
+#            - background-mqtt
+#            - web-fulltext-search
+#            - web-geolocation-search
+#            - web-baesian
+#            - web-photo-process
+#            - web-book-collection
+#            - web-users-fast-api
+#            - web-users-graphql
+#            - influxdb
+#            - chronograf
+#            - grafana
+#            - mongo
+#            - mqtt
+#            - krakend
+#            - web-tictactoe
+#            - redis
 
 volumes:
     grafana_data: {}

docker-nextjs/Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18 AS builder
+
+
+RUN git clone --branch nextjs https://github.com/danionescu0/docker-flask-mongodb-example.git app
+
+WORKDIR /app
+
+# Copy package files separately for better caching for dev
+#COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the project only for dev env
+#COPY . .
+
+
+# Expose the port and start the development server
+EXPOSE 3000
+
+CMD ["npm", "run", "dev", "--", "-H", "0.0.0.0"]

docker-nextjs/app/config.ts

@@ -0,0 +1,2 @@
+export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:85';
+

docker-nextjs/app/globals.css

@@ -0,0 +1,94 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

docker-nextjs/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Image Processing UI',
+  description: 'A simple UI for image processing API',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <main className="min-h-screen bg-gray-100">
+          {children}
+        </main>
+      </body>
+    </html>
+  )
+}
+