Writing a simple responsive webapp

I have one trivial webapp (garage door opener; e.g. two buttons) and another simple one (parental control) running on my openwrt router. The "technology" stack behind both is cgi-bin, simply because I'm illiterate to web development and the only digestabe example I've found on the internetz was in cgi-bin.
Based on the above, none of the apps are ergonomic, especially on mobile devices.

So it's time to ask questions and sharing information which direction I'd like to go:

  • I want the apps outside luci (to avoid credentials), but they should be written in lua (based on the assumption that lucy has already all the dependencies I'd ever need). Is this with lua a good assumption?
  • Or, is there any other advised interpreter? (If there is, do I need to run another uhttpd instance?)
  • The apps should be "responsive". I mean, should be looking good out-of-the-box on both desktop and mobile devices. Now I have to zoom a lot on mobile. Is it easily achievable with lua?
  • Are there simple examples around the web to steal and tailor for the chosen tech stack? Or any moderately painful way to achieve my goal? Just like the question here Hosting web applications on OpenWrt . (I'm not willing to become a web developer. I wouldn't have time to do so even if I wanted to, anyway.)

Any help is appreciated. Thank you in advance.

luci is currently in the process of getting rewritten not to require lua anymore, so while you do still get lua "for free" at the moment, that's not going to continue in the future.

I won't speak to your back end as honestly if you have a compact cgi-bin that works unless you're trying to mainstream this for other people I wouldn't even worry about changing it.

As far as the "responsive" design, that's entirely HTML/CSS in play, nothing to do with the backend. You said you're not a web developer which is fine, but you must have at least a slight knowledge of HTML/CSS if you want to be able to make something usable.

As a very basic point, have you tried adding:

<meta name="viewport" content="width=device-width">

to your HTML header section? That's usually enough to let mobile devices expect content that is sized/scaled for them rather than trying to "pretend to be in desktop mode". Give it a shot you might find that and a bit of CSS adjustments are really all you need.


100% agree with @jolouis

Unless you really want to re-write it, Iā€™d suggest keeping what you have and just adding the css to make it more friendly on mobile.

Thank you jolouis, I didn't need anything more than this meta line.
Honestly, I'd never found it by myself due to bad assumptions, that all this responsive design thing is based on JS somehow.

1 Like

Simplest solutions always best... sometimes the difficult part is FINDING the simple solution though! Glad you got it solved

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.