Switch to Docker SDK for Next.js deployment on HF Spaces

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+.next
+.git
+.gitignore
+.env*
+README.md
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.vercel
+*.tsbuildinfo
+next-env.d.ts
+app.py
+requirements.txt

Dockerfile

@@ -0,0 +1,38 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy all files
+COPY . .
+
+# Build the Next.js application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Copy necessary files from builder
+COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/node_modules ./node_modules
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+# Start the application
+CMD ["npm", "start"]

README.md

@@ -3,9 +3,8 @@ title: Hanzo Template Gallery
 emoji: 🎨
 colorFrom: gray
 colorTo: gray
-sdk: gradio
-sdk_version: 4.0.0
-app_file: app.py
+sdk: docker
+app_port: 7860
 pinned: true
 ---
 

app.py

@@ -1,39 +0,0 @@
-import gradio as gr
-import subprocess
-import os
-
-def start_next_app():
-    """Start the Next.js application"""
-    try:
-        # Install dependencies if needed
-        if not os.path.exists('node_modules'):
-            subprocess.run(['npm', 'install'], check=True)
-
-        # Build the Next.js app
-        subprocess.run(['npm', 'run', 'build'], check=True)
-
-        # Start the app
-        process = subprocess.Popen(['npm', 'start'])
-        return "Hanzo Template Gallery is running!"
-    except Exception as e:
-        return f"Error starting application: {str(e)}"
-
-# Create a simple Gradio interface that redirects to the Next.js app
-iface = gr.Interface(
-    fn=start_next_app,
-    inputs=None,
-    outputs="text",
-    title="Hanzo Template Gallery",
-    description="Professional web templates built with @hanzo/ui components",
-    article="""
-    <p>Visit the gallery at <a href="http://localhost:3000" target="_blank">http://localhost:3000</a></p>
-    <p>Built with Next.js, @hanzo/ui, and Tailwind CSS</p>
-    """
-)
-
-if __name__ == "__main__":
-    # Start the Next.js app in the background
-    start_next_app()
-
-    # Launch Gradio interface
-    iface.launch(server_name="0.0.0.0", server_port=7860)

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -H 0.0.0.0 -p ${PORT:-7860}",
     "lint": "next lint"
   },
   "dependencies": {

requirements.txt

@@ -1 +0,0 @@
-gradio>=4.0.0