Merge pull request #12 from dcblogdev/feature/replace-webpack-with-vite

Feature/replace webpack with vite

README.md

@@ -48,16 +48,10 @@ composer update
 
 >Ensure you've updated .env before migrating.
 
-Migrate the database
+Migrate and seed the database
 
 ```
-php artisan migrate
-```
-
-Seed the database
-
-```
-php artisan db:seed
+php artisan db:build
 ```
 
 Link Storage to public

src/AdminTwServiceProvider.php

@@ -12,7 +12,7 @@ class AdminTwServiceProvider extends ServiceProvider
      *
      * @return void
      */
-    public function register()
+    public function register(): void
     {
 
     }
@@ -22,7 +22,7 @@ public function register()
      *
      * @return void
      */
-    public function boot()
+    public function boot(): void
     {
         if (! $this->app->runningInConsole()) {
             return;
@@ -38,7 +38,7 @@ public function boot()
      *
      * @return array
      */
-    public function provides()
+    public function provides(): array
     {
         return [Console\InstallCommand::class];
     }

src/Console/InstallCommand.php

@@ -26,7 +26,7 @@ class InstallCommand extends Command
      *
      * @return void
      */
-    public function handle()
+    public function handle(): void
     {
         //copy folders
         (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/app', base_path('app'));
@@ -37,18 +37,22 @@ public function handle()
         (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/stubs', base_path('stubs'));
         (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/tests', base_path('tests'));
 
-        // Tailwind / Webpack...
         copy(__DIR__.'/../../stubs/composer.json', base_path('composer.json'));
         copy(__DIR__.'/../../stubs/phpunit.xml', base_path('phpunit.xml'));
         copy(__DIR__.'/../../stubs/package.json', base_path('package.json'));
+        copy(__DIR__.'/../../stubs/postcss.config.js', base_path('postcss.config.js'));
         copy(__DIR__.'/../../stubs/tailwind.config.js', base_path('tailwind.config.js'));
-        copy(__DIR__.'/../../stubs/webpack.mix.js', base_path('webpack.mix.js'));
+        copy(__DIR__.'/../../stubs/vite.config.js', base_path('vite.config.js'));
 
         if (file_exists(base_path('resources/views/welcome.blade.php'))) {
             unlink(base_path('resources/views/welcome.blade.php'));
         }
 
+        if (file_exists(base_path('resources/css/app.css'))) {
+            unlink(base_path('resources/css/app.css'));
+        }
+
         $this->info('Admin theme installed successfully.');
-        $this->info('Please run "composer update" then "npm install && npm run dev" command to build your assets.');
+        $this->info('Please run "composer update" then "npm install && npm run build" command to build your assets.');
     }
 }

stubs/package.json

@@ -1,30 +1,23 @@
 {
     "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": {
-        "@tailwindcss/forms": "^0.4.0",
-        "@tailwindcss/typography": "^0.5.1",
-        "alpinejs": "^3.4.2",
-        "autoprefixer": "^10.1.0",
+        "@fortawesome/fontawesome-free": "^6.2.1",
+        "@tailwindcss/typography": "^0.5.8",
+        "alpinejs": "^3.10.5",
+        "autoprefixer": "^10.4.13",
         "axios": "^0.25",
-        "laravel-mix": "^6.0.6",
+        "filepond": "^4.30.4",
+        "flatpickr": "^4.6.13",
+        "laravel-vite-plugin": "^0.7.2",
         "lodash": "^4.17.19",
-        "postcss": "^8.2.1",
-        "postcss-import": "^14.0.1",
-        "sass": "^1.49.7",
-        "sass-loader": "^12.4.0",
-        "tailwindcss": "^3.0.0",
-        "filepond": "^4.25.1",
-        "flatpickr": "^4.6.9",
-        "prismjs": "^1.23.0",
-        "@fortawesome/fontawesome-free": "^6.0.0"
+        "postcss": "^8.4.20",
+        "tailwindcss": "^3.2.4",
+        "vite": "^4.0.0",
+        "prismjs": "^1.29.0",
+        "sass": "^1.57.1"
     }
 }

stubs/postcss.config.js

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

stubs/resources/js/app.js

@@ -8,7 +8,7 @@ import * as FilePond from 'filepond';
 window.FilePond = FilePond;
 
 import Prism from 'prismjs';
-require('prismjs/plugins/normalize-whitespace/prism-normalize-whitespace');
+import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
 import 'prismjs/themes/prism-tomorrow.css'; // see other themes in the prism docs
 import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-php';

stubs/resources/sass/app.scss

@@ -1,10 +1,10 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
-@import '~@fortawesome/fontawesome-free/css/all.css';
-@import '~flatpickr/dist/flatpickr.css';
-@import '~filepond/dist/filepond.min.css';
+@import '@fortawesome/fontawesome-free/css/all.css';
+@import 'flatpickr/dist/flatpickr.css';
+@import 'filepond/dist/filepond.min.css';
 
 @import 'components/alert';
 @import 'components/button';

stubs/resources/views/layouts/app.blade.php

@@ -5,9 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>@yield('title') - {{ config('app.name', 'Laravel') }}</title>
-    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     @stack('styles')
-    <script src="{{ asset('js/app.js') }}" defer></script>
     @stack('scripts')
     <livewire:styles/>
     <style>

stubs/resources/views/layouts/guest.blade.php

@@ -5,8 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
         <title>{{ config('app.name', 'Laravel') }}</title>
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body>
         <div class="font-sans text-gray-900">

stubs/resources/views/layouts/plain.blade.php

@@ -4,9 +4,8 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
         @stack('styles')
-        <script src="{{ mix('js/app.js') }}" defer></script>
         @stack('scripts')
     </head>
     <body>

stubs/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: ['resources/sass/app.scss', 'resources/js/app.js'],
+            refresh: true,
+        }),
+    ],
+});