Building a Menu Bar Desktop Application with NativePHP package in Laravel

NativePHP package recently introduced and in Laravel it allows us to design and develop cross platform desktop applications. It has inherited from Electron project. In this blog post I'll show how to come-up with a desktop application using Laravel with Blade templates.

Create a new Laravel Project using composer

composer create-project laravel/laravel laravel-native-php

Installing NativePHP package

composer require nativephp/electron

Run php artisan command in the terminal to check what are the next NativePHP related commands to be executed.

We can see that there is a command to be executed call native:install which will install NativePHP by creating a separate AppServiceProvider for it.

As you can see once executed php artisan native:install command, you'll see it prompts for choosing options for two questions. We just need to select yes for installing the NativePHP NPM dependencies, and select no for starting the NativePHP development server.

After this point everything should looks good, and we can start the Laravel development server using php artisan serve command.

Nice!! We can see a desktop application has appeared as a normal Laravel web application. The difference is you can see the application menu on Mac menu bar as same as other desktop application. With that we can verify this is a desktop application, and not a web application runs on the browser.

Furthermore, it has created a dock icon as well.

Let's customise the code to make it more convenient prior adding some actual business logic to the application.

TIP: Keep in mind that hot reloading already in place, and when you make some changes to the code, it will reflect on the application interface in real time.

Keep the application on top every time

By adding the chain method alwaysOnTop() after calling Window::open() static method, the application will be on top everytime.

Set width, height, minimum height and minimum width

Window::open()

->alwaysOnTop()

->width(400)

->height(250)

->minWidth(300);

Changing the title

We can change the title by adding the following chain method.

->title('Hey Demo Laravel');

Keep the desktop windows on the same position after hot reload

->rememberState();

By calling the above chain method the window keeps at the same position even after the hot reload!!

Furthermore, you can refer to this https://nativephp.com/docs/1/the-basics/windows for a detailed guide.

Happy coding!!