Tutorials Programming Tutorials, Guides & Best Practices

This setup allows you to build a PWA with React and Vite, adding offline capabilities and other PWA features.

Vite uses environment variables to manage different settings for development and production. Create .env files to store these variables:

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';

   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
       ],
   });

This configuration tells Vite to process the app.css and app.js files in the resources directory and enables automatic page refresh when these files are updated.

   yarn

After installing dependencies, start the Vite development server: