Implement Laravel / NativePHP as a server/host on a desktop (allow localhost connections)

[patimio66]

Hi, welcome!
#nativephp #laravel #desktop #server

TL;DR I'm wondering how to implement Laravel as a server/host on a desktop, with the ability to share it over a local network for other devices to access via a browser.

Got a moment? Here's the full story:

I’d like to start working on a desktop version of my app / censored by author for computers/laptops. The idea is that users edit a collection of songs online (lyrics, tags, chords, etc.), then import that into the desktop app.

From the desktop, this song database should be accessible on tablets or phones connected to the same local network (via a browser). There should also be a way to "share" a specific song with other tablets, which is why I need a server to manage this.

I wanted to use NativePHP, but it doesn’t seem to support access from other devices on localhost, unlike Apache or Laragon (which can be configured for this). Has anyone tried using it, even just for fun?

The project is hobby-scale, mainly for myself, but maybe others will find it useful. I don’t have experience with technologies outside of Laravel and Livewire for backend/app development.

Do you have any other ideas on how to achieve this with minimal effort? (I don’t want to learn a completely new technology for this.) It should also be possible to compile this into a program that a non-technical user can install, even with a step-by-step guide.

I’d appreciate any small suggestions. 💛

[patimio66]

I got it! If anyone would be interested, it's possible by editing NativePHP vendor files, when you change some logic where the local server is turned on, and change the IP from 127.0.0.1 to 0.0.0.0, you can connect to the app via browser from an external device that is connected to the same local network. And you can then connect to the machine that is running the NativePHP app using http://ip:8100 (default port)! 😬

[rawezhcode]

how ?

[patimio66]

how ?

@rawezhcode You can edit \vendor\nativephp\electron\resources\js\out\main\index.js - there is a function callPhp(). Change 127.0.0.1 to 0.0.0.0. Let me know if you need any more help.

[patimio66]

DISCLAIMER: I am not sure about security of this approach. Maybe someone smarter can check it. I just needed it for my personal project, so strong security is not my number one factor in this use case.

[rawezhcode]

thanks

[PeteBishwhip]

DISCLAIMER: I am not sure about security of this approach. Maybe someone smarter can check it. I just needed it for my personal project, so strong security is not my number one factor in this use case.

Absolutely right. This method is insecure if used in the wrong way. Setting 0.0.0.0 opens it up to connections from ANYWHERE on the network, including from the internet. Including any devices you may not trust.

This is not recommended unless used on secured internal networks only.

[gabrielfula]

Hi @patimio66,

Sorry for the delay, but I had the same problem making web requests for a desktop application in NativePHP.

Exposing the entire application to receive any request is indeed a problem, so the idea here was to expose only what was necessary for web requests.

Going with the idea of ​​overwriting files in the vendor folder (not recommended), when generating the build with php artisan native:build, the code returned to its default values ​​due to composer.json. So I came up with a slightly different idea using ChildProcess and creating an internal proxy.

The idea here is to start an express application within the resources folder, which, upon starting, will run with host 0.0.0.0 on a different port than the one your application is running on.

This express application makes a request pointed to 127.0.0.1, thus making it possible to make it.

When starting the application in the NativeAppServiceProvider file in the boot method, I start a ChildProcess, something like this:

ChildProcess::start(
  cmd: ['node', 'resources/api/server.js']
  alias: 'tail',
  env: [
     'NODE_PORT' => 8101
  ]
);

And your server.js:

import app from "./index";

app.listen(process.env.NODE_PORT, '0.0.0.0', () => {});

const response = await axios.get(`http://127.0.0.1:${PORT_THAT_NATIVEPHP_IS_RUNNING}`, {
    params: req.query,
    headers: {
        'api-key': process.env.API_KEY
    }
});

Therefore, it is possible to use the proxy to make web requests to http://local_ip:express_port/your_route