this post was submitted on 16 Jul 2024

17 points (87.0% liked)

Programming

17670 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

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 [email protected]

founded 2 years ago

MODERATORS

[email protected]

[Help][Webdev]Minimal dev environment for Preact + TailwindCSS (self.programming)

submitted 5 months ago by Croquette to c/[email protected]

8 comments fedilink hide all child comments

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:

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.
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.
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

top 8 comments

sorted by: hot top controversial new old

[–] [email protected] 5 points 5 months ago* (last edited 5 months ago) (1 children)

It seems to me that the problem would be caused by Mongoose packing, rather than vite/rollup's build, since it seems to run fine on your development environment.

PS: Could you try reproducing the Problem using a mongoose server running on your development machine, or even better: on a Dockerfile? Then you could share a minimal example that could help to further diagnose the issue.

[–] Croquette 0 points 5 months ago* (last edited 5 months 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.

[–] [email protected] 3 points 5 months 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 2 points 5 months 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

[–] hector 3 points 5 months ago (1 children)

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

[–] [email protected] 2 points 5 months ago (1 children)

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.

[–] Croquette 1 points 5 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.