Project Overview

Step 2: Create the Project Structure

Execute the following commands to create the necessary directories.

1. Create Root Directory:

   mkdir <project-name>
   cd <project-name>
   

2. Create Subdirectories:

   mkdir src
   mkdir web
   mkdir scripts
   

Step 3: Initialize the Firmware Backend

1. Initialize PlatformIO: Run this command in the project's root directory.

   source .venv/bin/activate && platformio project init --board esp32dev
   

   This will create platformio.ini and other necessary files.
2. Create main.cpp: Create a placeholder src/main.cpp file with a minimal Arduino sketch.

   #include <Arduino.h>
   
   void setup() {
     Serial.begin(115200);
     Serial.println("Hello from the new project!");
   }
   
   void loop() {
     delay(1000);
   }
   

Step 4: Initialize the Web UI Frontend

1. Initialize Vite Project: Run this command from the project root to create a React project inside the web directory.

   npm create vite@latest web -- --template react
   

2. Install Dependencies:

   npm install --prefix web
   

Step 5: Create Helper Scripts

1. Create embed_assets.py: Create a placeholder Python script in the scripts/ directory. This script will eventually be used to embed the web UI into the firmware.

   # scripts/embed_assets.py
   print("This script will be used to embed the web assets.")
   # TODO: Implement the logic to convert web/dist files into C++ headers.
   

Step 6: Conclude and Inform the User

1. Summarize the project structure you have created.
2. Provide the user with the next steps:
   • "You can now start developing the firmware in the src directory."
   • "To work on the web UI, cd web and run npm run dev."
   • "Remember to build the web UI and run source .venv/bin/activate && python scripts/embed_assets.py before deploying the firmware."