Development

Developing your NativePHP apps can be done in the browser, using workflows with which you're already familiar.

This allows you to iterate rapidly on parts like the UI and major functionality, even using your favorite tools for testing etc.

But when you want to test native features, then you must run your app on a real or emulated device.

Whether you run your native app on an emulated or real device, it will require compilation after changes have been made.

#Build your frontend

If you're using Vite or similar tooling to build any part of your UI (e.g. for React/Vue, Tailwind etc), you'll need to run your asset build command before compiling your app.

To facilitate ease of development, you should install the nativephpMobile Vite plugin.

#The nativephpMobile Vite plugin

To make your frontend build process works well with NativePHP, simply add the nativephpMobile plugin to your vite.config.js:

import { nativephpMobile, nativephpHotFile } from './vendor/nativephp/mobile/resources/js/vite-plugin.js'; 
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
            hotFile: nativephpHotFile(), 
        }),
        tailwindcss(),
        nativephpMobile(), 
    ]
});

Once that's done, you'll need to adjust your Vite build command when creating builds for each platform — simply add the --mode=[ios|android] option. Run these before compiling your app for each platform in turn:

npm run build -- --mode=ios
 
npm run build -- --mode=android

#Compile your app

To compile and run your app, simply run:

php artisan native:run

This single command takes care of everything and allows you to run new builds of your application without having to learn any new editors or platform-specific tools.

#Working with Xcode or Android Studio

On occasion, it is useful to compile your app from inside the target platform's dedicated development tools, Android Studio and Xcode.

If you're familiar with these tools, you can easily open the projects using the following Artisan command:

php artisan native:open

#Configuration

You can configure the folders that the watch command pays attention to in your config/nativephp.php file:

'hot_reload' => [
    'watch_paths' => [
        'app',
        'routes',
        'config',
        'database',
        // Make sure "public" is listed in your config 
        'public',
    ],
]

#Hot Reloading

We've tried to make compiling your apps as fast as possible, but when coming from the 'make a change; hit refresh'-world of typical browser-based PHP development that we all love, compiling apps can feel like a slow and time-consuming process.

Hot reloading aims to make your app development experience feel just like home.

You can start hot reloading by running the following command:

php artisan native:watch

This will start a long-lived process that watches your application's source files for changes, pushing them into the emulator after any updates and reloading the current screen.

If you're using Vite, we'll also use your Node CLI tool of choice (npm, bun, pnpm, or yarn) to run Vite's HMR server.

#Enabling HMR

To make HMR work, you'll need to add the hot file helper to your laravel plugin's config in your vite.config.js:

import { nativephpMobile, nativephpHotFile } from './vendor/nativephp/mobile/resources/js/vite-plugin.js'; 
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
            hotFile: nativephpHotFile(), 
        }),
        tailwindcss(),
        nativephpMobile(),
    ]
});

Note: When testing on real devices, hot reloading is communicating with the Vite server running on your development machine. For this to work, ensure the test device is connected to the same Wi-Fi network as your development machine.

This is useful during development for quickly testing changes without re-compiling your entire app. When you make changes to any files in your Laravel app, the web view will be reloaded and your changes should show almost immediately.

Vite HMR is perfect for apps that use SPA frameworks like Vue or React to build the UI. It even works on real devices, not just simulators! As long as the device is on the same network as the development machine.

Don't forget to add public/ios-hot and public/android-hot to your .gitignore file!

#Laravel Boost

NativePHP for Mobile supports Laravel Boost which aims to accelerate AI-assisted development by providing the essential context and structure that AI needs to generate high-quality, Laravel-specific code.

After installing nativephp/mobile and laravel/boost simply run php artisan boost:install and follow the prompts to activate NativePHP for Laravel Boost!