DEV Community

Rahul Gupta
Rahul Gupta

Posted on • Edited on

Creating Your First Window in a NativePHP App

#nativephp #laravel #php #desktop

Creating Your First Window in a NativePHP App

Once you've set up your NativePHP project with Laravel, the next exciting step is creating your first desktop window. With just a few lines of code, you can launch a fully functional window—powered by Electron—using your Laravel backend.

In this article, we'll walk you through the process of building your first window in a NativePHP app. Let's get started.

🛠 Prerequisites

Make sure you’ve already installed NativePHP using:

composer require nativephp/electron php artisan native:install
Enter fullscreen mode Exit fullscreen mode

To serve the application:

php artisan serve php artisan native:serve
Enter fullscreen mode Exit fullscreen mode

📁 Step 1: Locate the MainWindow.php File

After installation, NativePHP creates a file located at:

/app/NativePHP/MainWindow.php
Enter fullscreen mode Exit fullscreen mode

This file acts as your window configuration class, allowing you to define window properties, routing, and behavior.

🧱 Step 2: Customize the Window

Open MainWindow.php. You’ll see a boot() method where you can configure your app window:

use Native\Laravel\Facades\Window; public function boot(): void { Window::open() ->title('My First NativePHP Window') ->width(1024) ->height(768) ->resizable() ->frameless(false); }
Enter fullscreen mode Exit fullscreen mode

Here’s what each option does:

  • title() – Sets the window title

  • width() / height() – Defines window dimensions

  • resizable() – Allows resizing the window

  • frameless(false) – Shows or hides the system window frame

You can also load a specific route:

->url('http://localhost:8000/dashboard');
Enter fullscreen mode Exit fullscreen mode

Or use a named route:

->route('home');
Enter fullscreen mode Exit fullscreen mode

🌐 Step 3: Define the Route and View

Let’s make sure the route is available in Laravel.

In routes/web.php, add:

Route::get('/', function () { return view('welcome'); })->name('home');
Enter fullscreen mode Exit fullscreen mode

You can replace 'welcome' with your own Blade view or component.

🔁 Hot Reloading

Whenever you change the window configuration or frontend content, NativePHP hot reloads the changes when you re-run:

php artisan native:serve
Enter fullscreen mode Exit fullscreen mode

To enable DevTools for debugging:

->devtools(true);
Enter fullscreen mode Exit fullscreen mode

🖥 Run the App

Once you’re ready, spin up your Laravel server and NativePHP instance:

php artisan serve php artisan native:serve
Enter fullscreen mode Exit fullscreen mode

You’ll see your first window pop up—a native desktop application running your Laravel frontend!

🔄 Bonus: Opening Multiple Windows

You can create additional window classes, like DashboardWindow.php:

php artisan make:native-window DashboardWindow
Enter fullscreen mode Exit fullscreen mode

This helps manage different parts of your app as separate windows—think settings, popups, etc.

Then add them to your config in config/nativephp.php:

'windows' => [ App\NativePHP\MainWindow::class, App\NativePHP\DashboardWindow::class, ],
Enter fullscreen mode Exit fullscreen mode

🧭 Recap

✅ You created your first native window

✅ Customized size, title, and view

✅ Connected it to Laravel routes and Blade templates

✅ Enabled DevTools for development

✅ Learned how to create additional windows

Top comments (0)