💫 Adds a getting started guide

docs/.obsidian/workspace.json

@@ -21,7 +21,7 @@
             "state": {
               "type": "markdown",
               "state": {
-                "file": "api.md",
+                "file": "Getting started.md",
                 "mode": "source",
                 "source": false
               }
@@ -94,7 +94,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "api.md",
+                "file": "Getting started.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -111,7 +111,7 @@
             "state": {
               "type": "outgoing-link",
               "state": {
-                "file": "api.md",
+                "file": "Getting started.md",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": true
               }
@@ -134,7 +134,7 @@
             "state": {
               "type": "outline",
               "state": {
-                "file": "api.md"
+                "file": "Getting started.md"
               }
             }
           }
@@ -157,15 +157,15 @@
   },
   "active": "cdbb92cef28dd635",
   "lastOpenFiles": [
+    "api.md",
+    "Getting started.md",
     "Spot.md",
     "Simulation/Simulation.md",
     "Simulation/Pasted image 20240319103157.png",
     "Simulation",
     "Electronic connections.canvas",
-    "Getting started.md",
     "media/PIO-upload.png",
     "media",
-    "api.md",
     "readme.md",
     "Untitled.canvas",
     "Architecture & Design principles.md"

docs/Getting started.md

@@ -0,0 +1,67 @@
+## Prerequisites
+To prepare the frontend code for the ESP32, a specific build chain is required. Start by installing these essential tools:
+### Required Software
+Install the following software to ensure all functionalities:
+
+- [VSCode](https://code.visualstudio.com/) - Preferred IDE for development
+- [Node.js](https://nodejs.org) - Needed for app building
+- A package manager of your choice (npm, pnpm, yarn)
+- [Python](https://www.python.org/downloads/) - Used for firmware build scripts
+
+### Project Structure
+Understand the project organization through these key directories:
+- [docs/](https://github.com/runeharlyk/SpotMicroESP32-Leika/tree/master/docs)  - Contains all documentation
+- [app/](https://github.com/runeharlyk/SpotMicroESP32-Leika/tree/master/app) - SvelteKit-based frontend
+- [esp32](https://github.com/runeharlyk/SpotMicroESP32-Leika/tree/master/esp32) - Firmware for the robot
+## Setting up PlatformIO
+### Configure Build Target
+Modify the `platformio.ini` file at [platformio.ini](https://github.com/runeharlyk/SpotMicroESP32-Leika/tree/master/esp32/platformio.ini) to match your board specifications. Adapt or remove environment settings as necessary based on your board.
+
+```ini
+[platformio]
+...
+default_envs = esp32dev
+...
+
+[env:esp32cam]
+board = esp32cam
+board_build.mcu = esp32c3
+```
+
+For additional boards, refer to the [official board list](https://docs.platformio.org/en/latest/boards/index.html#espressif-32).
+
+### Build & Upload Process
+Update the `platformio.ini` file for your board, then navigate to the PlatformIO tab, select your environment, click `Upload Filesystem Image` and after uploading finish, click `Upload and Monitor`. The filesystem image only has to be uploaded the first time and will override config files on the microcontroller. 
+When uploading new firmware the app is evaluated and if necessary will be rebuild.
+
+## Setting up SvelteKit
+### Proxy Configuration for Development
+Configure the proxy settings in the `vite.config.ts` file to direct API calls to your ESP32 device. By default it used the factory MDNS address, but can be changed to the ip if preferred.
+
+```ts
+server: {
+	proxy: {
+		'/api': {
+			target: 'http://spot-micro.local', // Here
+			changeOrigin: true,
+			ws: true
+		},
+		'/ws': {
+			target: 'ws://spot-micro.local', // Here
+			changeOrigin: true,
+			ws: true
+		}
+	}
+},
+```
+
+Changes require a restart of the development server.
+
+### Start the Development Server
+Use the following commands to launch the development server with Vite, enabling instant updates:
+
+```sh
+cd app
+pnpm run dev
+```
+Access the frontend via the provided browser link.