rpa_vision_v3/visual_workflow_builder/QUICK_FIX.md

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:

sudo apt update
sudo apt install nodejs npm

Fedora/RHEL:

sudo dnf install nodejs npm

Arch Linux:

sudo pacman -S nodejs npm

Option 2: Using NodeSource (Latest Version)

For Ubuntu/Debian:

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)

# 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:

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)

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:

cd visual_workflow_builder/backend
source venv/bin/activate
python app.py

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

Terminal 2 - Frontend:

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:

curl http://localhost:5001/health

Expected response:

{"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:

   cd visual_workflow_builder/frontend
   npm install
   

2. Start development:

   ./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):

# Edit backend/.env
PORT=5001

Frontend (port 3000):

# Edit frontend/webpack.config.js
# Change devServer.port to 3001

Permission Denied on start.sh

chmod +x visual_workflow_builder/start.sh

Backend Database Error

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!