Setting up Scratch GUI and API on a Raspberry Pi 4 - CodeClubLuxembourg/plottybot-toolkit-web GitHub Wiki

This guide explains how to set up a Raspberry Pi 4 to host a web server for the Scratch GUI and a custom API. It includes steps for OS installation, software configuration, and deployment.

1. Download and install Raspberry Pi Imager on your computer.

2. Insert your microSD card into the card reader.

3. Open the Raspberry Pi Imager and select:

   • Operating System: Raspberry Pi OS (other) > Raspberry Pi OS Lite (64-bit)
   • Storage: Choose your microSD card.

4. Customize settings:

   • Click the gear icon ⚙️ to enable advanced settings.
   • Set up Wi-Fi credentials for a headless configuration (no monitor/keyboard required).
   • Set username to codeclub and specify a secure password.

5. Write the image to the microSD card and insert it into the Raspberry Pi.

Once the Pi boots, connect via SSH: ssh codeclub@<raspberry-pi-ip>

sudo apt update && sudo apt upgrade -y

Install Apache and PHP:

sudo apt install apache2 php libapache2-mod-php -y

1. Transfer the scratch_20241124.tar.gz file to the Raspberry Pi (e.g., using scp).

2. Extract the files:

sudo mkdir -p /var/www/html/scratch
tar xvf scratch_20241124.tar.gz
sudo cp -r build/* /var/www/html/scratch

3. Set appropriate ownership:

   sudo chown -R www-data:www-data /var/www/html/scratch

   Note: No need to set chmod 755 for /var/www/html/scratch unless you encounter permission issues. The www-data ownership should suffice.

1. Transfer the API folder (containing api.php, devices.php, .htaccess, etc.) to the Raspberry Pi.

2. Place the API content in /var/www/html/api:

   sudo mkdir -p /var/www/html/api
   sudo cp -r <api-folder>/* /var/www/html/api
   

3. Set permissions:

   sudo chown -R www-data:www-data /var/www/html/api
   sudo chmod -R 755 /var/www/html/api
   

Edit the Apache configuration file to support both scratch and api directories:

sudo nano /etc/apache2/sites-available/000-default.conf

Example content:

less

Copy code

<VirtualHost *:80>
    ServerAdmin webmaster@localhost

    # Scratch GUI root
    DocumentRoot /var/www/html/scratch

    # Alias for API
    Alias /api /var/www/html/api

    <Directory /var/www/html/scratch>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    <Directory /var/www/html/api>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Restart Apache to apply changes:

sudo systemctl restart apache2

Visit the following URL in your browser:

arduino

Copy code

http://<raspberry-pi-ip>/

Test the API endpoints:

• Devices JSON endpoint: http://<raspberry-pi-ip>/api/devices
• Devices Management Interface: http://<raspberry-pi-ip>/api/devices.php

• /var/www/html/scratch: Setting www-data ownership is sufficient. Only apply chmod 755 if access issues arise.
• /var/www/html/api: chmod 755 ensures files are readable and executable by the server.

If something goes wrong, check Apache logs for errors:

sudo tail -f /var/log/apache2/error.log

• 500 Internal Server Error: Ensure mod_rewrite is enabled:

  sudo a2enmod rewrite
  sudo systemctl restart apache2
  

• API Route Not Found: Verify .htaccess in /var/www/html/api contains:

  RewriteEngine On
  RewriteRule ^devices$ api.php [L]