HUGGING_FACE_DEPLOYMENT.md

Hosting Lin on Hugging Face Spaces

This guide explains how to deploy your Lin application (Vite + React + Tailwind frontend with Flask backend) on Hugging Face Spaces.

Project Structure

Hugging Face Spaces requires both frontend and backend to run in the same environment. Organize your project as follows:

Lin/
├── backend/
│   ├── app.py
│   ├── requirements.txt
│   └── ... (other backend files)
├── frontend/
│   ├── package.json
│   ├── vite.config.js
│   └── ... (other frontend files)
├── app.py              # Main entry point for Flask
├── requirements.txt    # Python dependencies
├── runtime.txt         # Python version (optional)
├── README.md           # Project documentation
└── Dockerfile          # Docker configuration (optional)

Prerequisites

1. Build your Vite frontend (Hugging Face Spaces cannot run Vite dev server)
2. Configure Flask to serve both API endpoints and static frontend files
3. Set up proper environment variables for production

Step-by-Step Deployment

1. Build the Frontend

Before deployment, you need to build your React frontend:

cd frontend
npm install
npm run build

This creates a dist/ folder with static assets that Flask can serve.

2. Configure Flask to Serve Frontend

Your Flask app is already configured to serve the frontend. The backend/app.py file includes routes to serve static files from the frontend/dist directory.

3. Update Environment Variables

Update your .env files for production:

frontend/.env.production:

VITE_API_URL=https://zelyanoth-lin.hf.space
VITE_NODE_ENV=production

backend/.env:

# LinkedIn OAuth configuration
REDIRECT_URL=https://zelyanoth-lin.hf.space/auth/callback

# Other configurations...

Don't forget to update your LinkedIn App settings in the LinkedIn Developer Console to use this redirect URL.

4. Root requirements.txt

Create a requirements.txt file at the project root with all necessary Python dependencies:

flask
flask-jwt-extended
supabase
python-dotenv
celery
redis
# Add other backend dependencies

5. Runtime Configuration (Optional)

Create a runtime.txt file to specify the Python version:

python-3.10

6. Hugging Face Metadata

Add Hugging Face metadata to your README.md:

---
title: Lin - LinkedIn Community Manager
sdk: docker
app_file: app.py
license: mit
---

7. Docker Configuration (Optional)

If you want more control over the deployment environment, create a Dockerfile:

FROM python:3.10

WORKDIR /app

# Install Node.js for frontend build
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get update && apt-get install -y nodejs

# Copy and install Python dependencies
COPY requirements.txt .
RUN pip install -r requirements.txt

# Copy package files for frontend
COPY frontend/package*.json ./frontend/
# Install frontend dependencies
RUN cd frontend && npm install

# Copy all files
COPY . .

# Build frontend
RUN cd frontend && npm run build

# Expose port
EXPOSE 7860

# Run the application
CMD ["python", "app.py"]

8. Deploy to Hugging Face Spaces

1. Create a new Space on Hugging Face:

   • Go to https://huggingface.co/new-space
   • Choose "Python (Docker)" as the SDK
   • Give your Space a name

2. Push your code via Git:

   git init
   git remote add origin https://huggingface.co/spaces/<username>/<space-name>
   git add .
   git commit -m "Deploy to Hugging Face Spaces"
   git push origin main
   

How It Works

1. Hugging Face installs Python and Node.js dependencies
2. During the build process, it runs npm run build in the frontend directory
3. It installs Python dependencies from requirements.txt
4. It runs python app.py
5. Flask serves both:
   • Your API endpoints (e.g., /api/*)
   • Your compiled React frontend (static files from frontend/dist)

Scheduler (Celery) Considerations

Your application uses Celery for scheduling tasks. On Hugging Face Spaces:

1. Celery Worker and Beat can run in the same container as your Flask app
2. Redis is used as the broker and result backend
3. Task Persistence is handled through the database, not just the Celery schedule file

The scheduler will work, but you should be aware that:

• Hugging Face Spaces might put your app to sleep after periods of inactivity
• When the app wakes up, the Celery processes will restart
• Your schedules are stored in the database, so they will be reloaded when the app restarts

Access Your Application

After deployment, your app will be available at: https://zelyanoth-lin.hf.space

Troubleshooting

1. Frontend not loading: Ensure you've run npm run build and committed the dist/ folder
2. API calls failing: Check that your VITE_API_URL points to the correct Space URL
3. OAuth issues: Verify that your redirect URL in both the .env file and LinkedIn Developer Console match your Space URL
4. Build errors: Check the build logs in your Space's "Files" tab for detailed error messages
5. Scheduler not working: Check that Redis is available and that Celery processes are running

Additional Notes

• Hugging Face Spaces has resource limitations, so optimize your application accordingly
• For production use with significant traffic, consider using a more robust hosting solution
• Regularly update your dependencies to ensure security patches
• Monitor your Space's logs for any runtime errors