Build with custom UI

[teshax]

I have cloned the UI repository and have applied some modifications. How would I go about building the desktop repo using the UI repo? I've tried building the UI repo and putting the dist contents into a UI folder inside the desktop repo but it doesn't recognize it. I've also tried using start:dev with a path to the built UI dist and a path to the SRC but It didn't work. I'm on windows 10 running Node 17.9.1.

[pimterry]

The desktop shell is effectively just a browser - it doesn't read files directly, instead it loads a URL where your UI is hosted.

By default it loads https://app.httptoolkit.tech, which is the production UI deployment. That's set here.

You can either change that URL directly and make a separate desktop app build, or run the normal desktop build with an APP_URL env var set pointing to a different URL (though now that I actually look at this, I might change that to HTTPTOOLKIT_APP_URL in future, just to avoid conflicts here).

If you want to just test locally, you can run npm run start:dev and it will load http://local.httptoolkit.tech:8080 (this resolves to localhost - it's the default UI URL if you run npm run start in the UI repo) and won't start its own server (it assumes you'll run one separately - you can do so either by using npm run start in the UI, or by running npm run start:web in the UI and npm run start in a server, if you want to use your own local server build).

Note that for security reasons, the official server releases will only allow connections from app.httptoolkit.tech. That's defined here. Non-prod builds however will also allow connections from any localhost address. If you want to host a UI on a different URL then you'll need to tweak your server to allow requests from that URL first. Whatever you do though, don't allow all URLs to access this! The server API is very powerful - if you allow requests from any origin, then any web page you load in your browser on the same machine could send requests to your server to launch process & configure proxies etc.

Does that make sense?

[Starmania]

Hey, after some work because I was trying to do the exact same thing, this make sense, and it works ! I have only one question, is there a way to put (or launch) the UI server in local directly when launching the desktop app ?

[pimterry]

If you're not modifying the UI, then you can just run this repo with npm start and it'll use the existing UI from app.httptoolkit.tech, in which case you won't need a local server.

If you are modifying the UI, you'll need a separate checkout & web server for that anyway, so yes you do need to separately launch that - the desktop app can't know where that is, and in general I try to keep the components independent so far as possible. You could plausibly build a quick script to launch both if you want to though with a few lines of bash to glue everything together with the right paths for your machine.

[Starmania]

Ok thanks 👍. I think it will be the best choice, I was just wandering if there is a less sketchy way to do it... Anyway, thanks for your answers! I probably will try to make a PR for localization support, I have some idea how make this

[pimterry]

PRs for localization support would be very welcome indeed! Feel free to open a issue in the UI if you want to discuss that or if you have any questions at all.