this post was submitted on 16 Jul 2024
16 points (86.4% liked)

Programming

16924 readers
578 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Rules

  • Follow the programming.dev instance rules
  • Keep content related to programming in some way
  • If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev



founded 1 year ago
MODERATORS
 

Hello,

I am currently trying to implement a webserver on an embedded STM32F439 using the Mongoose library and Preact (3kB React equivalent made especially for embedded solutions).

My speciality is in embedded development and my web dev experience is next to nil, so I have a hard time finding a solution for my problem.

Right now, I tried to use Preact + Vite.js, but it seems to be causing issues when packing my webpage into my embedded system.

The workflow I am using right now is as follows:

  1. Create a webpage with Preact/TailwindCSS in jsx and build the page with npm run build. If I run npm run dev or start a http server with python3, the webpage loads properly.

  2. For Mongoose Library, since I don't have a file system, I use their packing utility which takes the webpage files and convert them into a C array that can then be unpacked by the Mongoose Library at runtime.

  3. Start the embedded server, get an IP and the server is online. At that point, I can customize my paths to show whatever I want and fetch embedded resources. The issue happens here. As I add more elements to my webpage, eventually, it stops working. It produces a range of issues (403 forbidden, illegal characters for example).

Preact+Vite.js is definitely creating some issue here with the embedded dev environnement, so I would like to explore more "barebone" options where I have more control over what is bundled and how it is bundled. It really feels like Preact+Vite.js is obfuscated a lot when bundling all the files together, and I would like to have more control over that part so that I can learn a little bit about the workflow of the bundling.

So my question is as follow : what other dev environnement do you recommend knowing that the webpage is packed in a C array and then runs on an embedded system with no file system?

Thanks

you are viewing a single comment's thread
view the rest of the comments
[–] Croquette@sh.itjust.works 0 points 1 month ago* (last edited 1 month ago) (1 children)

This is a board with limited ressource (2MB of flash, 512k of RAM). When I say embedded, I mean an mcu soldered to the PCB. So docker is a no go. So the only way I can test my webpage on the embedded device is to pack it with the mongoose packer and try it.

So my setup right now is that I use my laptop as a development machine and the target platform is an Arm M4. So I pack the webpage , which gives me a c file, that I then compile with a crosscompiler and put on my devkit.

Edit: and I agree that there is most probably an issue with the packer, but I cannot remove the packer from the equation, so this is why I am looking for a more barebone solution.

[–] ClemaX@lemm.ee 3 points 1 month ago (1 children)

I understand your project's constraints. I meant that you could try compiling and running the mongoose server linked against the packed filesystem in your development machine.

[–] Croquette@sh.itjust.works 2 points 1 month ago

I didn't think about that. I could create a small program that takes my packed_fs and test it against mongoose webserver. So at the very least, I could test it right away.

That would give me the certitude that the packed_fs is functional and could help me pinpoint the issue.

Thanks