Introduction

When working on a Laravel project, it's crucial to have an efficient workflow. One way to boost productivity is by setting up automatic notifications that alert you whenever a file change is detected. This tutorial will guide you on integrating macOS notifications with Vite in a Laravel project.

Setting Up a Shell Script for Notifications

First, you'll need to create a shell script that triggers a macOS notification. This script is straightforward and uses AppleScript through the command line. Follow these steps to create and configure your script:

1. Create the Script:

• Open your preferred text editor and create a file named notify.sh.

• Insert the following content into the file:

  !/bin/bash

  Use AppleScript to show a notification

  osascript -e 'display notification "File change detected!" with title "Vite Watcher"'

• Save the file in your project directory.

1. Make the Script Executable:

• Open your terminal and navigate to the directory where notify.sh is saved.
• Run the command to make the script executable: chmod +x notify.sh.

Integrating the Notification Script with Vite

With your notification script ready, the next step is to integrate it into your Vite configuration. This involves modifying the vite.config.js file in your Laravel project. Here’s how to do it:

1. Modify the Vite Configuration:

• Open vite.config.js in your editor.

• Add the following plugin configuration to handle file changes:

  import { exec } from 'child_process';

  export default defineConfig({ plugins: [ laravel({ input: [ 'packages/devdojo/auth/resources/css/auth.css', 'packages/devdojo/auth/resources/js/auth.js' ], refresh: true }), { name: 'run-on-watch', handleHotUpdate({ file, server }) { exec('./notify.sh', (error, stdout, stderr) => { if (error) { console.error(exec error: ${error}); return; } console.log(stdout: ${stdout}); console.error(stderr: ${stderr}); }); return []; } } ], });

1. Run Vite:

• Start the Vite server using npm run dev or yarn dev. Your setup should now trigger a macOS notification whenever Vite detects a file change.

Conclusion

This setup not only enhances your productivity by providing immediate feedback on file changes but also integrates smoothly with macOS functionalities. It's a simple yet powerful way to keep track of changes in real-time during development.