Merge pull request #2 from phpbali-org/1-replace-laravel-mix-to-vite

Replace Laravel Mix with Vite
phpbali-org · Aug 23, 2024 · d67f85b · d67f85b
2 parents 1be40fa + e554fbd
commit d67f85b
Show file tree

Hide file tree

Showing 15 changed files with 1,736 additions and 10,106 deletions.
diff --git a/config.php b/config.php
@@ -3,6 +3,8 @@
 return [
     'production' => false,
     'baseUrl' => '',
+    'viteUrl' => env('VITE_URL', 'http://localhost:5173'),
+    'viteClientUrl' => env('VITE_URL', 'http://localhost:5173').'/@vite/client',
     'title' => 'PHPBali',
     'description' => 'Komunitas pemrograman PHP di Bali.',
     'collections' => [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,16 +1,15 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
-        "dev": "mix",
-        "watch": "mix watch",
-        "staging": "NODE_ENV=staging mix",
-        "production": "mix --production"
+        "dev": "vite",
+        "production": "vite build"
     },
     "devDependencies": {
-        "laravel-mix": "^6.0.39",
-        "laravel-mix-jigsaw": "^2.0.0",
-        "postcss": "^8.4.14",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.41",
         "postcss-import": "^14.0.0",
-        "tailwindcss": "^3.1.6"
+        "tailwindcss": "^3.4.10",
+        "vite": "^5.4.2"
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+}
diff --git a/source/_assets/js/main.js b/source/_assets/js/main.js
@@ -0,0 +1 @@
+import '../css/main.css';
diff --git a/source/_layouts/main.blade.php b/source/_layouts/main.blade.php
@@ -8,8 +8,16 @@
         <meta name="image" content="/assets/images/phpbali-logo.png">
         <link rel="icon" type=image/png href="/assets/images/favicon.png">
         <title>{{ $page->title }}</title>
-        <link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">
-        <script defer src="{{ mix('js/main.js', 'assets/build') }}"></script>
+        @if($page->production)
+            @php
+                $manifest = json_decode(file_get_contents(public_path('/assets/build/.vite/manifest.json')), true);
+            @endphp
+            <script type="module" src="/assets/build/{{$manifest['source/_assets/js/main.js']['file']}}"></script>
+            <link rel="stylesheet" href="/assets/build/{{$manifest['source/_assets/js/main.js']['css'][0]}}">
+        @else
+            <script type="module" crossorigin src="{{ $page->viteClientUrl }}"></script>
+            <script type="module" crossorigin src="{{ $page->viteUrl }}/source/_assets/js/main.js"></script>
+        @endif
     </head>
     <body class="text-gray-900 font-sans antialiased">
         <div class="menu-underlay"></div>

diff --git a/source/assets/build/.vite/manifest.json b/source/assets/build/.vite/manifest.json
@@ -0,0 +1,11 @@
+{
+  "source/_assets/js/main.js": {
+    "file": "main-BLEzA8au.js",
+    "name": "main",
+    "src": "source/_assets/js/main.js",
+    "isEntry": true,
+    "css": [
+      "main-DX3Ve2mL.css"
+    ]
+  }
+}