# Quick Fix Guide - Visual Workflow Builder

## Issues Encountered

### 1. ✅ FIXED: Werkzeug Production Warning
**Error**: `RuntimeError: The Werkzeug web server is not designed to run in production`

**Solution**: Added `allow_unsafe_werkzeug=True` flag to the Flask-SocketIO configuration in `backend/app.py`. This is safe for development.

### 2. ⚠️ ACTION REQUIRED: npm Not Found
**Error**: `npm : commande introuvable` (npm command not found)

**Solution**: Install Node.js and npm on your system.

## Installing Node.js and npm

### Option 1: Using System Package Manager (Recommended)

#### Ubuntu/Debian:
```bash
sudo apt update
sudo apt install nodejs npm
```

#### Fedora/RHEL:
```bash
sudo dnf install nodejs npm
```

#### Arch Linux:
```bash
sudo pacman -S nodejs npm
```

### Option 2: Using NodeSource (Latest Version)

For Ubuntu/Debian:
```bash
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
```

### Option 3: Using nvm (Node Version Manager)

```bash
# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Reload shell configuration
source ~/.bashrc  # or ~/.zshrc

# Install Node.js 18
nvm install 18
nvm use 18
```

### Option 4: Download from Official Website

Visit https://nodejs.org/ and download the installer for your system.

## Verify Installation

After installing, verify that Node.js and npm are available:

```bash
node --version   # Should show v18.x.x or higher
npm --version    # Should show 9.x.x or higher
```

## Starting the Application

### Option 1: Automatic Start (Both Frontend and Backend)

```bash
cd visual_workflow_builder
./start.sh
```

This will:
1. Start the backend on http://localhost:5001
2. Install frontend dependencies (first time only)
3. Start the frontend on http://localhost:3000

### Option 2: Manual Start (Separate Terminals)

#### Terminal 1 - Backend:
```bash
cd visual_workflow_builder/backend
source venv/bin/activate
python app.py
```

Backend will be available at: http://localhost:5001

#### Terminal 2 - Frontend:
```bash
cd visual_workflow_builder/frontend
npm install  # First time only
npm start
```

Frontend will be available at: http://localhost:3000

## Testing the Setup

### Backend Health Check:
```bash
curl http://localhost:5001/health
```

Expected response:
```json
{"status": "healthy", "version": "1.0.0"}
```

### Frontend:
Open your browser to http://localhost:3000

You should see:
- "Visual Workflow Builder" heading
- "Créez des workflows RPA par glisser-déposer" subtitle
- A message confirming the setup is complete

## Current Status

✅ **Backend**: Ready and working
- Flask server configured
- SocketIO configured
- API endpoints created (stubs)
- Database initialized

⏳ **Frontend**: Waiting for Node.js/npm installation
- All configuration files ready
- All source files created
- Just needs npm to install dependencies

## Next Steps After Installation

Once Node.js/npm is installed:

1. **Install dependencies**:
   ```bash
   cd visual_workflow_builder/frontend
   npm install
   ```

2. **Start development**:
   ```bash
   ./start.sh
   ```

3. **Begin Task 2**: Implement base data models
   - See `.kiro/specs/visual-workflow-builder/tasks.md`

## Troubleshooting

### Port Already in Use

If port 5000 or 3000 is already in use:

**Backend** (port 5000):
```bash
# Edit backend/.env
PORT=5001
```

**Frontend** (port 3000):
```bash
# Edit frontend/webpack.config.js
# Change devServer.port to 3001
```

### Permission Denied on start.sh

```bash
chmod +x visual_workflow_builder/start.sh
```

### Backend Database Error

```bash
cd visual_workflow_builder/backend
rm -f *.db
python app.py  # Will recreate the database
```

## Summary

**Task 1 Status**: ✅ **COMPLETE**

All project structure and configuration is complete. The only remaining step is installing Node.js/npm on your system, which is a one-time setup.

Once npm is installed, the entire Visual Workflow Builder will be ready for development!