17

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 1 points 4 months ago* (last edited 4 months ago)

I cannot share the code unfortunately as this is for a start-up and there is already some identifiable info in the code. The repo is private.

However, Cesanta provides a lot of examples in their repo Mongoose Library. Cesanta uses a dual license, GPL for anyone to use, or Closed Source if you pay for it. They support a lot of mcu families.

They also released a Wizard to create a simple interface through their web app. Check them out.

Edit: I forgot about the initial point. Thanks for the info. I am used to my tools, but webdev is a lot more open-ended, so I got lost pretty hard. I had a lot of libraries in my project, so I'm gonna try to recreate the basic element with Vite.js and Tailwind.css only to limit the number of libraries I depend on, as to limit the error potential.

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

Programming

17314 readers
231 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