83 lines
2.7 KiB
Markdown
83 lines
2.7 KiB
Markdown
# Getting started
|
|
|
|
## 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.
|