Building a Menu Bar Desktop Application with NativePHP package in Laravel
Tags: laravel, php, webdev, development
Published: 2023-08-21 12:04:42

[NativePHP](https://nativephp.com/docs/1/getting-started/introduction#what-exactly-is-nativephp) package recently introduced and in Laravel it allows us to design and develop cross platform desktop applications. It has inherited from [Electron](https://www.electronjs.org/) project. In this blog post I'll show how to come-up with a desktop application using Laravel with Blade templates.

<u>Create a new Laravel Project using composer</u>

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

![Image0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1k8p7i6a71cwtjk6zp8.png)

<u>Installing NativePHP package</u>

composer require nativephp/electron

![Image1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upwf7vtycwi4sqn37shm.png)

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

![Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hljwlew0dq4saj52t33.png)

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.

![Image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v217cy9fme7nq79lpi0v.png)

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.

![Image4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63h31wzt7c4wi1d5bfor.png)

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.

![Image5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2ldagdz7lmt0d2if3xz.png)

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.

<u>Keep the application on top every time</u>

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

![Image6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc1wqvx420j81ukddn9o.png)

<u>Set width, height, minimum height and minimum width</u>

`Window::open()
        ->alwaysOnTop()
        ->width(400)
        ->height(250)
        ->minWidth(300);`

<u>Changing the title</u>

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

`->title('Hey Demo Laravel');`

![Image7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixpp247gxanmagwgyww8.png)

<u>Keep the desktop windows on the same position after hot reload</u>

` ->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](https://nativephp.com/docs/1/the-basics/windows) for a detailed guide.

Happy coding!!