ludocomito's picture
init
d328b13
# Deployment Guide for Hugging Face Spaces
This guide explains how to deploy the Datasets Navigator app to Hugging Face Spaces using Docker.
## Prerequisites
- Docker installed and running (for local testing)
- Hugging Face account ([sign up here](https://huggingface.co/join))
## Files Created for Docker Deployment
- `Dockerfile` - Multi-stage Docker build configuration
- `.dockerignore` - Excludes unnecessary files from Docker build
- `docker-compose.yml` - For local testing
- `README.md` - Updated with HF Spaces metadata
- `next.config.mjs` - Updated with `output: 'standalone'` for Docker
## Local Testing (Optional)
Before deploying to Hugging Face Spaces, you can test the Docker build locally:
### Option 1: Using Docker directly
```bash
# Build the image
docker build -t datasets-navigator .
# Run the container
docker run -p 7860:7860 datasets-navigator
# Access the app at http://localhost:7860
```
### Option 2: Using Docker Compose
```bash
# Build and run
docker-compose up --build
# Access the app at http://localhost:7860
# Stop with Ctrl+C, or in detached mode:
docker-compose down
```
## Deploying to Hugging Face Spaces
### Method 1: Via Hugging Face Web Interface
1. Go to [Hugging Face Spaces](https://huggingface.co/spaces)
2. Click "Create new Space"
3. Fill in the details:
- **Space name**: Choose a name (e.g., `datasets-navigator`)
- **License**: Select appropriate license
- **SDK**: Select "Docker"
- **Hardware**: Start with "CPU basic" (can upgrade later)
4. Clone the Space repository:
```bash
git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
```
5. Copy all files from `datasets_navigator_app/` to the cloned repository
6. Push to Hugging Face:
```bash
cd YOUR_SPACE_NAME
git add .
git commit -m "Initial commit: Datasets Navigator app"
git push
```
### Method 2: Push Existing Repository
If you already have a Space created:
```bash
# Add Hugging Face as a remote
cd datasets_navigator_app
git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
# Push to Hugging Face
git add .
git commit -m "Deploy Datasets Navigator to HF Spaces"
git push hf main
```
## Configuration
The app is configured via `README.md` frontmatter:
```yaml
---
title: Prova
emoji: 🍽️
colorFrom: blue
colorTo: purple
sdk: docker
app_port: 7860
---
```
You can customize:
- `title`: The Space's display name
- `emoji`: Icon shown in the Space
- `colorFrom` / `colorTo`: Gradient colors for the Space card
- `app_port`: Must match the port in Dockerfile (7860)
## Environment Variables & Secrets
If your app needs environment variables or secrets:
1. Go to your Space settings on Hugging Face
2. Navigate to "Variables and secrets"
3. Add variables (public) or secrets (private)
They will be available as environment variables in the Docker container.
## Troubleshooting
### Build Fails
- Check the build logs in the Space's "Logs" tab
- Verify all dependencies are in `package.json`
- Ensure `package-lock.json` is committed
### App Won't Start
- Verify the app listens on `0.0.0.0:7860`
- Check the Docker logs for errors
- Ensure user permissions are correct (user ID 1000)
### Port Issues
- The app MUST listen on the port specified in `app_port` (7860)
- Verify `ENV PORT=7860` in Dockerfile
- Next.js reads the PORT environment variable automatically
## Upgrading Space Hardware
If you need more resources:
1. Go to Space settings
2. Select "Hardware" tab
3. Choose upgrade (CPU/GPU options available)
4. Confirm the upgrade
Note: GPU and upgraded hardware have associated costs.
## References
- [HF Spaces Docker Documentation](https://huggingface.co/docs/hub/spaces-sdks-docker)
- [Next.js Docker Documentation](https://nextjs.org/docs/app/building-your-application/deploying#docker-image)
- [Hugging Face Spaces Examples](https://huggingface.co/spaces)