From 8e93467317ff8bf3023e29c90848977c9e480f48 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 19 Jan 2026 12:57:36 +0000 Subject: [PATCH] Convert to Next.js - core setup complete Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com> --- .env.example | 10 +- .eslintrc.json | 3 + .github/workflows/deploy-pages.yml | 9 +- .github/workflows/docker-publish.yml | 4 +- .gitignore | 8 + Dockerfile | 29 +- app/PageLayout.tsx | 89 + app/atoms/page.tsx | 43 + app/demo/page.tsx | 60 + app/globals.css | 92 + app/layout.tsx | 40 + app/molecules/page.tsx | 43 + app/organisms/page.tsx | 43 + app/page.tsx | 23 + app/providers.tsx | 42 + app/settings/page.tsx | 105 + app/templates/page.tsx | 43 + docker-compose.production.yml | 2 +- docker-compose.yml | 2 +- next.config.ts | 49 + package-lock.json | 4454 +++++++++++++++-- package.json | 20 +- src/components/layout/BackendIndicator.tsx | 2 +- .../layout/navigation/NavigationSidebar.tsx | 31 +- .../settings/BackendAutoConfigCard.tsx | 2 +- .../settings/StorageBackendCard.tsx | 2 +- src/hooks/useStorageConfig.ts | 2 +- src/lib/storage.ts | 2 +- tsconfig.json | 36 +- 29 files changed, 4935 insertions(+), 355 deletions(-) create mode 100644 .eslintrc.json create mode 100644 app/PageLayout.tsx create mode 100644 app/atoms/page.tsx create mode 100644 app/demo/page.tsx create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/molecules/page.tsx create mode 100644 app/organisms/page.tsx create mode 100644 app/page.tsx create mode 100644 app/providers.tsx create mode 100644 app/settings/page.tsx create mode 100644 app/templates/page.tsx create mode 100644 next.config.ts diff --git a/.env.example b/.env.example index 63f1ec5..5f232d2 100644 --- a/.env.example +++ b/.env.example @@ -1,8 +1,12 @@ # Frontend Configuration # Flask Backend URL - If set, the app will automatically use Flask backend instead of IndexedDB -# Development: VITE_FLASK_BACKEND_URL=http://localhost:5000 -# Production: VITE_FLASK_BACKEND_URL=https://backend.example.com -VITE_FLASK_BACKEND_URL= +# Development: NEXT_PUBLIC_FLASK_BACKEND_URL=http://localhost:5000 +# Production: NEXT_PUBLIC_FLASK_BACKEND_URL=https://backend.example.com +NEXT_PUBLIC_FLASK_BACKEND_URL= + +# Base path for deployment (e.g., for GitHub Pages) +# Leave empty for root deployment +NEXT_PUBLIC_BASE_PATH= # Backend Configuration (for backend/app.py) # CORS Allowed Origins - Comma-separated list of allowed frontend URLs diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..3722418 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": ["next/core-web-vitals", "next/typescript"] +} diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml index 755891f..7151d43 100644 --- a/.github/workflows/deploy-pages.yml +++ b/.github/workflows/deploy-pages.yml @@ -31,11 +31,12 @@ jobs: - name: Install dependencies run: npm ci - - name: Build + - name: Build Next.js run: npm run build env: - VITE_FLASK_BACKEND_URL: ${{ vars.VITE_FLASK_BACKEND_URL || '' }} - VITE_BASE_PATH: ${{ vars.VITE_BASE_PATH || '/' }} + BUILD_STATIC: 'true' + NEXT_PUBLIC_FLASK_BACKEND_URL: ${{ vars.NEXT_PUBLIC_FLASK_BACKEND_URL || '' }} + NEXT_PUBLIC_BASE_PATH: ${{ vars.NEXT_PUBLIC_BASE_PATH || '' }} - name: Setup Pages uses: actions/configure-pages@v4 @@ -43,7 +44,7 @@ jobs: - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: - path: './dist' + path: './out' deploy: environment: diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml index 9c8696c..3332c64 100644 --- a/.github/workflows/docker-publish.yml +++ b/.github/workflows/docker-publish.yml @@ -117,5 +117,5 @@ jobs: cache-from: type=gha,scope=frontend cache-to: type=gha,mode=max,scope=frontend build-args: | - VITE_FLASK_BACKEND_URL=${{ vars.VITE_FLASK_BACKEND_URL || '' }} - VITE_BASE_PATH=${{ vars.VITE_BASE_PATH || '/' }} + NEXT_PUBLIC_FLASK_BACKEND_URL=${{ vars.NEXT_PUBLIC_FLASK_BACKEND_URL || '' }} + NEXT_PUBLIC_BASE_PATH=${{ vars.NEXT_PUBLIC_BASE_PATH || '' }} diff --git a/.gitignore b/.gitignore index 6cfe203..a8a84fd 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,12 @@ dist-ssr *-dist *.local +# Next.js +/.next/ +/out/ +next-env.d.ts +.vercel + # Editor directories and files .vscode/* !.vscode/extensions.json @@ -25,6 +31,8 @@ dist-ssr *.sw? .env +.env.local +.env*.local **/agent-eval-report* packages pids diff --git a/Dockerfile b/Dockerfile index ef0c9cb..4f89310 100644 --- a/Dockerfile +++ b/Dockerfile @@ -3,26 +3,37 @@ FROM node:20-alpine AS builder WORKDIR /app +# Copy package files COPY package*.json ./ RUN npm ci +# Copy source code COPY . . -ARG VITE_FLASK_BACKEND_URL -ENV VITE_FLASK_BACKEND_URL=$VITE_FLASK_BACKEND_URL - -ARG VITE_BASE_PATH -ENV VITE_BASE_PATH=$VITE_BASE_PATH +# Build arguments for environment variables +ARG NEXT_PUBLIC_FLASK_BACKEND_URL +ARG NEXT_PUBLIC_BASE_PATH +ENV NEXT_PUBLIC_FLASK_BACKEND_URL=$NEXT_PUBLIC_FLASK_BACKEND_URL +ENV NEXT_PUBLIC_BASE_PATH=$NEXT_PUBLIC_BASE_PATH +# Build Next.js app RUN npm run build # Production stage -FROM nginx:alpine +FROM node:20-alpine AS runner -COPY --from=builder /app/dist /usr/share/nginx/html +WORKDIR /app -COPY nginx.conf /etc/nginx/conf.d/default.conf +ENV NODE_ENV=production + +# Copy necessary files from builder +COPY --from=builder /app/public ./public +COPY --from=builder /app/.next/standalone ./ +COPY --from=builder /app/.next/static ./.next/static EXPOSE 3000 -CMD ["nginx", "-g", "daemon off;"] +ENV PORT=3000 +ENV HOSTNAME="0.0.0.0" + +CMD ["node", "server.js"] diff --git a/app/PageLayout.tsx b/app/PageLayout.tsx new file mode 100644 index 0000000..e929b3e --- /dev/null +++ b/app/PageLayout.tsx @@ -0,0 +1,89 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { Code } from '@phosphor-icons/react'; +import { Navigation } from '@/components/layout/navigation/Navigation'; +import { NavigationSidebar } from '@/components/layout/navigation/NavigationSidebar'; +import { useNavigation } from '@/components/layout/navigation/useNavigation'; +import { BackendIndicator } from '@/components/layout/BackendIndicator'; +import { ReactNode } from 'react'; + +export function PageLayout({ children }: { children: ReactNode }) { + const { menuOpen } = useNavigation(); + + return ( +
+ Fundamental building blocks - basic HTML elements styled as reusable components
++ Experience live React component editing with real-time preview. Edit the code on the left and watch it update instantly on the right. +
+Simple combinations of atoms that work together as functional units
+Complex UI components composed of molecules and atoms
+Save, organize, and share your code snippets
+Manage your database and application settings
+Page-level layouts that combine organisms into complete interfaces
+VITE_FLASK_BACKEND_URL
+ NEXT_PUBLIC_FLASK_BACKEND_URL
VITE_FLASK_BACKEND_URL environment variable and cannot be changed here.
+ Storage backend is configured via NEXT_PUBLIC_FLASK_BACKEND_URL environment variable and cannot be changed here.