Custom changes at web UI locally for testing

[Benbenbenebeneb]

Hi, I have a thesis where I have to implement a new tab at pfsenses web UI, which by clinking it will open a different page(like the other tabs). Inside the page I have to add some functionalities locally, without committing it at github.
The problem is that for 2 weeks now, I can't setup any IDE or anything, to have an immediate visual representation of my changes to pfsense's web interface.
For example, I want to have pfsense's web interface in a browser, so when I do make changes to pfsense's code and reload the page, my changes are visible immediately. I don't know what to do. I've read netgate's documentations but I can't find this specific thing anywhere. If someone can help me step by step or with a call or something will help a l o t.

Have a great day.

[jimp]

That isn't really a topic that would be covered in the docs, it's up to how each developer chooses to handle it and there are several techniques which are viable.

Personally, I use an editor that can load and save files over scp/sftp. With ssh enabled on the firewall and using the root account+admin password, I can make edits to files on the firewall directly and work that way. Options for this vary by OS, but it's a common feature these days.

I know others make local changes to their own repository and then copy the files to the firewall with scp/filezilla/rsync or similar setups. That is a bit more work for each edit, but still viable.

For simple changes you can even use the editor in the firewall GUI at Diagnostics > Edit File. Though I would caution against using that to edit backend code, GUI page edits should be OK.

It can be even more cumbersome, but editing at the ssh or serial/video console shell using vi or ee also works.

[Benbenbenebeneb]

@jimp Thank you for replying. So, while pfsense is up, you directly manipulate it's files for the 'real-time visualization' part. Is it possible to make this connection through a VM? And if so, I should handle the VM with pfsense software as a router and add files there, right?

[jimp]

@benbenbenebeneb said in Custom changes at web UI locally for testing:

@jimp Thank you for replying. So, while pfsense is up, you directly manipulate it's files for the 'real-time visualization' part.

Yes.

Is it possible to make this connection through a VM? And if so, I should handle the VM with pfsense software as a router and add files there, right?

VMs work fine, same as a physical system would. How you arrange all that is entirely up to you. In a lab development environment it's generally safe to allow access through the WAN of a lab system and reach it that way, or you could setup a development system on the LAN side of the lab system and do it that way.

As long as you're doing this on an isolated lab/testing environment and not on a system directly exposed to an Internet connection with public addresses then it's not terribly important how you restrict the access.

[Benbenbenebeneb]

@jimp Thank you so much for helping out. I'll try those methods and get back to you, the following hours, when I manage to implement them.

[Benbenbenebeneb]

@jimp Hi again I tried the Filezilla method but couldn't connect to it. I took the following steps to make the ssh connection (not in particular order): Gave admin user the Authorized SSH Key of my PC, enabled secure shell with public key only, through WAN rules added a pass action with "any" as a source and from pfsense's terminal enabled secure shell. Still when I put my credentials and IP correct, prints the following:
(IP of pfsense VM: 192.168.1.1 and Port: 5555)

Status: Connecting to 192.168.1.1:5555...
Status: Connection established, waiting for welcome message...
Error: Connection timed out after 20 seconds of inactivity
Error: Could not connect to server

Is anything I've done wrong?