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.