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

  • spartanatreyu@programming.dev
    2·
    4 months ago

    I’d recommend removing as many variables as possible.

    Try getting a single html page to work (no mongoose, no preact, no vite, no tailwind).

    If you can’t get that to work, then no amount of tinking in preact/vite/tailwind/mongoose will help you.

    Once you have a single page running, you can look at the next steps:

    For scripting: try plain js, then js + mongoose, then preact + mongoose. If a step fails, rely on the step before it.

    For styling: try plain css, then a micro css framework that doesn’t require a build step (e.g. https://purecss.io/, https://picocss.com/), then tailwind if you really want to try messing around with vite again.

    • CroquetteOP
      1·
      4 months ago

      Thanks for the input.

      When I use vite + preact + tailwindcss, I can make a simple webpage that loads correctly. I spoke with Cesanta and they also use Preact+TailwindCSS, this is how I knew what to look for at the beginning.

      It is when I start to add things to the Webpage that it starts to fail randomly. Removing the code that cause the crash sometimes fix the issue, other times not. It is hard for me to pinpoint what is causing the issue. My guess is that it’s probably something that I do creates the issue.

      Right now, I restarted a simple webpage with Preact+TailwindCSS and I will stick to these two libraries and see if the issues still appear. That will limit the number of libraries that can cause issues.