Setting up for basic luci development

I want to build a simple application luci configuration page, and modify some of the existing gui. I have a router with 21.02rc3 installed.

https://github.com/openwrt/luci/wiki/DevelopmentEnvironmentHowTo suggests

The recommended way to develop LuCI is to edit it on a real OpenWrt system in conjunction with an editor or IDE which supports remotely editing files via the SCP or SFTP protocol.

This seems lightweight and nice. But the Javascript files on the router are minified, and so don't exactly match what is on github.

Q: Is there an easy/recommended way of upgrading the router files to be uncompressed before editing them?

I would just grab the corresponding files from github, they shouldn't be minimized there.

2 Likes

As files are minimized independently and not bundled in any way you can replace them one-by-one with github versions.

1 Like

If you compile your own image, you can disable the minification for LuCI, so that files on router match the GitHub version.

2 Likes

I have installed a full beautiful /www/luci-static/resources/view/system/system.js on the router. To make sure everything is working I have tweaked some text labels and default values, added a new field to the uci, etc. Seems to work (after I figured out caching). Thank you each!

My next goal is to figure out how to add/remove bigger "pages" from luci. In the new Javascript luci world, how would I remove the whole Network menu, or remove the Software part of the System menu? On the wiki I find the older lua descriptions for entry() in the Wiki, but how is that done in Javascript?
image

I have found /usr/share/luci/menu.d (on router) which seems to have the JSON defining the top of the screen menus, those in BLACK in the photo above. I can very crudely edit those files and see the impact.

I would still find any develop/build documentation for the modern preferred way of doing these things very helpful, in case anyone has any pointers.

1 Like

Thank you. Great idea!