Merge pull request #1 from kitar/shift-74765

Migrate from Laravel Mix to Vite

.env.example

@@ -25,6 +25,6 @@ PUSHER_APP_SECRET=app-secret
 PUSHER_HOST=127.0.0.1
 PUSHER_PORT=6001
 
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_HOST="${PUSHER_HOST}"
-MIX_PUSHER_PORT="${PUSHER_PORT}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_HOST="${PUSHER_HOST}"
+VITE_PUSHER_PORT="${PUSHER_PORT}"

.gitignore

@@ -2,6 +2,7 @@
 /public/css
 /public/js
 /public/hot
+/public/build
 /public/storage
 /public/mix-manifest.json
 /storage/*.key

composer.json

@@ -2,13 +2,16 @@
     "name": "laravel/laravel",
     "type": "project",
     "description": "The Laravel Framework.",
-    "keywords": ["framework", "laravel"],
+    "keywords": [
+        "framework",
+        "laravel"
+    ],
     "license": "MIT",
     "require": {
         "php": "^8.0.2",
         "guzzlehttp/guzzle": "^7.2",
         "kitar/laravel-dynamodb": "^1.0",
-        "laravel/framework": "^9.2",
+        "laravel/framework": "^9.19",
         "laravel/sanctum": "^2.14.1",
         "laravel/tinker": "^2.7",
         "laravel/vapor-core": "^2.21",

package.json

@@ -1,25 +1,22 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "@alpinejs/intersect": "^3.10.2",
         "@tailwindcss/forms": "^0.5.0",
         "alpinejs": "^3.10.2",
         "axios": "^0.25",
         "laravel-echo": "^1.11.7",
-        "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",
         "postcss": "^8.4.12",
         "pusher-js": "^7.1.0-beta",
         "tailwindcss": "^3.0.24",
-        "trix": "^2.0.0-beta.0"
+        "trix": "^2.0.0-beta.0",
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0",
+        "autoprefixer": "^10.4.0"
     }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

resources/js/app.js

@@ -1,4 +1,4 @@
-require('./bootstrap');
+import './bootstrap';
 
 import Trix from 'trix'
 import Alpine from 'alpinejs'

resources/js/bootstrap.js

@@ -1,12 +1,14 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -18,15 +20,16 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 import Echo from 'laravel-echo';
 
-window.Pusher = require('pusher-js');
+import Pusher from 'pusher-js';
+window.Pusher = Pusher;
 
 window.Echo = new Echo({
     broadcaster: 'pusher',
-    key: process.env.MIX_PUSHER_APP_KEY,
-    wsHost: process.env.MIX_PUSHER_HOST,
-    wsPort: process.env.MIX_PUSHER_PORT,
-    wssPort: process.env.MIX_PUSHER_PORT,
-    forceTLS: process.env.MIX_PUSHER_PORT === 443,
+    key: import.meta.env.VITE_PUSHER_APP_KEY,
+    wsHost: import.meta.env.VITE_PUSHER_HOST,
+    wsPort: import.meta.env.VITE_PUSHER_PORT,
+    wssPort: import.meta.env.VITE_PUSHER_PORT,
+    forceTLS: import.meta.env.VITE_PUSHER_PORT === 443,
     encrypted: true,
     disableStats: true,
     enabledTransports: ['ws', 'wss'],

vite.config.js

@@ -0,0 +1,14 @@
+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,
+        }),
+    ],
+});