Migrate from Laravel Mix to Vite (#97)

* Add npm dependencies

* Update build scripts

* Configure Vite

* Remove `webpack.mix.js`

* Use ES modules

* Rename ENV variables

* Add PostCSS configuration for Tailwind

* Use new `@vite` Blade directive

* Ignore build assets

* feat: update node dependencies

* fix: vite run

* Fix inertia require

* Fix: remove deprecated tilde in app.css imports

* Fix: rename mix environment variable to use vite prefix

* fix: vite env import

* fix(vite build): css not found error

---------

Co-authored-by: Shift <[email protected]>
Co-authored-by: Jan Pihl <[email protected]>
Co-authored-by: jpih <[email protected]>

.env.example

@@ -5,7 +5,7 @@ APP_DEBUG=true
 APP_URL=http://localhost
 APP_PUBLIC_URL=http://localhost
 APP_IS_VPN=false
-MIX_APP_MAX_ORDER_COUNT=8
+VITE_APP_MAX_ORDER_COUNT=8
 
 APP_PORTALS_URL=http://127.0.0.1:8000
 APP_PORTALS_API_SECRET=secret
@@ -59,8 +59,8 @@ PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_APP_CLUSTER=mt1
 
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 
 OCTANE_HTTPS=false
 OCTANE_WORKERS=4

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /public/hot
+/public/build
 /public/storage
 /resources/*.csv
 /storage/*.key

Dockerfile

@@ -42,7 +42,7 @@ RUN apk add --no-cache nodejs npm
 RUN npm install
 
 # build application
-# RUN npm run production
+# RUN npm run build
 
 # install roadrunner
 COPY --from=spiralscout/roadrunner:2023.3.2 /usr/bin/rr /usr/bin/rr

app/Http/Controllers/PersonController.php

@@ -75,7 +75,7 @@ public function buy(Request $request, int $id, int $articleID)
         $article = Article::findOrFail($articleID);
 
         $amount = $request['amount'];
-        if (! is_numeric($amount) || $amount < 1 || $amount > env('MIX_APP_MAX_ORDER_COUNT')) {
+        if (! is_numeric($amount) || $amount < 1 || $amount > env('VITE_APP_MAX_ORDER_COUNT')) {
             return Redirect::route('person.show', ['id' => $id]);
         }
 

package.json

@@ -3,28 +3,27 @@
     "description": "Tally system for the first week of the Department of Electrical Engineering and Information Technology at FH Aachen - University of Applied Sciences.",
     "version": "2.0.0",
     "license": "MIT",
+    "type": "module",
     "repository": {
         "type": "git",
         "url": "https://github.com/fsr5-fhaachen/strichlistensystem"
     },
     "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": {
         "autoprefixer": "^10.4.20",
         "axios": "^1.7.7",
         "browser-sync": "^2.26.2",
         "browser-sync-webpack-plugin": "^2.3.0",
-        "laravel-mix": "^6.0.49",
+        "laravel-vite-plugin": "^1.0.5",
         "lodash": "^4.17.21",
         "postcss": "^8.4.47",
         "tailwindcss": "^3.4.12",
+        "unplugin-vue-components": "^0.27.4",
+        "unplugin-auto-import": "^0.18.3",
+        "vite": "^5.4.7",
         "vue-loader": "^17.4.2"
     },
     "dependencies": {
@@ -35,6 +34,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.8",
         "@inertiajs/inertia": "^0.11.1",
         "@inertiajs/inertia-vue3": "^0.6.0",
+        "@vitejs/plugin-vue": "^5.1.4",
         "@vueuse/core": "^11.1.0",
         "nprogress": "^0.2.0",
         "postcss-import": "^16.1.0",

postcss.config.cjs

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