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)