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

  • hector@sh.itjust.works
    3·
    4 months ago

    Hey! First off, your project is super interesting! Do you have a repo so I can play around with it (I have some ideas for it).

    Secondly, you should be aware that Vite.JS is not a web bundler on itself. It’s just a front-end for Rollup made for ease of development and convenience. Rollup is much more complicated & customizable, and will surely suit your need!

    You can either replace Vite or use this option !

    Please update me!

    • Croquette@sh.itjust.worksOP
      12·
      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.