FROM node:20

RUN npm install -g pnpm

# Hugging Face uses port 7860 by default
EXPOSE 7860
ENV PORT 7860
ENV HOSTNAME "0.0.0.0"

# Create a non-root user
RUN useradd -m appuser

# Set the working directory
WORKDIR /home/appuser/react-video-editor

# Clone the code repository
RUN git clone https://github.com/designcombo/react-video-editor.git .

# Change ownership of the entire project directory
RUN chown -R appuser:appuser /home/appuser/react-video-editor

# Set correct permissions for the project directory
RUN chmod -R 755 /home/appuser/react-video-editor

# Switch to the non-root user
USER appuser

# Install dependencies
RUN pnpm install

# Build the application
RUN pnpm run build

# Ensure the user has write permissions in the necessary directories
RUN mkdir -p /home/appuser/react-video-editor/.vite && \
    chmod 755 /home/appuser/react-video-editor/.vite

# Give write permissions to the node_modules directory
RUN chmod -R 755 /home/appuser/react-video-editor/node_modules

# Start the application with more verbose logging
CMD ["sh", "-c", "ls -la && pnpm run preview -- --host 0.0.0.0 --port 7860 --debug"]