From 2fd4163b6d6cf3ab28e7ebe9cca201bb72946cbd Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Fri, 5 Dec 2025 10:40:09 +0000 Subject: [PATCH 1/3] Improved hot reloading --- .../mobile/2/getting-started/development.md | 118 +++++++++++------- 1 file changed, 76 insertions(+), 42 deletions(-) diff --git a/resources/views/docs/mobile/2/getting-started/development.md b/resources/views/docs/mobile/2/getting-started/development.md index e232e08a..dae2e3f4 100644 --- a/resources/views/docs/mobile/2/getting-started/development.md +++ b/resources/views/docs/mobile/2/getting-started/development.md @@ -98,10 +98,42 @@ If you're familiar with these tools, you can easily open the projects using the php artisan native:open ``` +### Configuration + +You can configure the folders that the `watch` command pays attention to in your `config/nativephp.php` file: + +```php +'hot_reload' => [ + 'watch_paths' => [ + 'app', + 'routes', + 'config', + 'database', + // Make sure "public" is listed in your config [tl! highlight:1] + '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 PHP development that we all love, compiling apps can feel like a slow and time-consuming process. +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. @@ -111,69 +143,71 @@ You can start hot reloading by running the following command: php artisan native:watch ``` -You can also pass the `--watch` option to the `native:run` command. + 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. -Use this in tandem with Vite's own HMR for the platform you wish to test on: +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. -```shell -npm run dev -- --mode=ios +### Enabling HMR -npm run dev -- --mode=android -``` +To make HMR work, you'll need to add the `hot` file helper to your `laravel` plugin's config in your `vite.config.js`: -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. +```js +import { nativephpMobile, nativephpHotFile } from './vendor/nativephp/mobile/resources/js/vite-plugin.js'; // [tl! focus] -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. +export default defineConfig({ + plugins: [ + laravel({ + input: ['resources/css/app.css', 'resources/js/app.js'], + refresh: true, + hotFile: nativephpHotFile(), // [tl! focus] + }), + tailwindcss(), + nativephpMobile(), + ] +}); +``` - -### Configuration - -You can configure the folders that the `watch` command pays attention to in your `config/nativephp.php` file: +```shell +# Terminal 1 +php artisan native:watch ios -```php -'hot_reload' => [ - 'watch_paths' => [ - 'app', - 'routes', - 'config', - 'database', - // Make sure "public" is listed in your config [tl! highlight:1] - 'public', - ], -] +# Terminal 2 +php artisan native:watch android ``` -### Order matters +This way you can see your changes reflected in real-time on both platforms **at the same time**. Wild. -Depending on which order you run these commands, you may find that hot reloading doesn't work immediately. It's often -best to get the commands running, get your app open, and then make a request to a new screen to allow your app to pick -up the `hot` file's presence and connect to the HMR server. - - - +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. -#### Skip the prompts + From 78f23eb34f9b4937405958a961f30755838c1be5 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Tue, 2 Dec 2025 23:06:21 +0000 Subject: [PATCH 2/3] Update --- .../docs/mobile/2/concepts/authentication.md | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/resources/views/docs/mobile/2/concepts/authentication.md b/resources/views/docs/mobile/2/concepts/authentication.md index c86ebd80..e0c54a7c 100644 --- a/resources/views/docs/mobile/2/concepts/authentication.md +++ b/resources/views/docs/mobile/2/concepts/authentication.md @@ -74,18 +74,34 @@ You will likely want to use an OAuth client library in your app to make interact When initiating the auth flow for the user, you should use the `Native\Mobile\Facades\Browser::auth()` API, as this is purpose-built for securely passing authorization codes back from the OAuth service to your app. -You should set your redirect URL to `nativephp://127.0.0.1/some/route`, where `some/route` is a route you've defined in -your app's routes that will be able to handle the auth code. +For this to work, you must set a `NATIVEPHP_DEEPLINK_SCHEME` that will be unique for your application on users' devices. -Note that the scheme of the redirect URL in this case is **always** `nativephp://`. This has nothing to do with any -custom deep link scheme you may have set for your app. It is only tied to the `Browser::auth()` session. +```dotenv +NATIVEPHP_DEEPLINK_SCHEME=myapp +``` + +Then you must define your redirect URL. It should match your scheme and the route in your app that will handle the callback +data. + +```php +Browser::auth('https://workos.com/my-company/auth?redirect=myapp://auth/handle') +``` + +Most services will expect you to pre-define your redirect URLs as a security feature. You should be able to provide your +exact URL, as this will be the most secure method. + +How you handle the response in your app depends on how that particular API operates and the needs of your application. From ce8a515c428316bf5a4abadcd001c477f218544a Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Fri, 5 Dec 2025 15:55:46 +0000 Subject: [PATCH 3/3] Add note about .gitignore for hot reload directories Added reminder to include hot reload directories in .gitignore. --- resources/views/docs/mobile/2/getting-started/development.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/resources/views/docs/mobile/2/getting-started/development.md b/resources/views/docs/mobile/2/getting-started/development.md index dae2e3f4..09c989a9 100644 --- a/resources/views/docs/mobile/2/getting-started/development.md +++ b/resources/views/docs/mobile/2/getting-started/development.md @@ -202,6 +202,8 @@ changes to any files in your Laravel app, the web view will be reloaded and your 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!** +