Tips on LuCi development workflow?

I noticed that there is no support for the ipset option in LuCi's firewall configuration. While I can manually edit the firewall config file, it would be beneficial to be able to edit the rules from the web interface.

So I'm thinking of adding support for the ipset option to rules.js - for those who have developed LuCi components, any tips on the quickest workflow for making and testing changes (preferably without having to reflash my image every change)?

if all the changes are truly JS / CSS, then you can edit LuCI live from a browser, or maybe mirror the webpage using wget. If you have everything right you would only have to flash once to make sure it works

1 Like

I'll give this a try when I return from the holidays.

Here is a good commit to study, but it is more complicated than what you're doing...

in this commit, JOW added the new tab under firewall called "NAT Rules"

It used to be 4 tabs:
General Settings
Port Forwards
Traffic Rules
Custom Rules

I am guessing that it's best to add a tab for ipset settings. there is some way to have that tab appear only if ipset is installed, but I don't know how that works...

In this file, all of the webpage text from the javascripts are stored as objects for translating to different languages by substitution. for example line 603 is the description you see after you hit the NAT Rules tab, and it is used by line 128 of the .js file. the other PO files have all of this, but msgid is the original text in english and msgstr is the text in another language to be switched out when that language packages is installed and enabled.

#: applications/luci-app-firewall/htdocs/luci-static/resources/view/firewall/snats.js:128
msgid ""
"NAT rules allow fine grained control over the source IP to use for outbound "
"or forwarded traffic."
msgstr ""