Vanilo Admin Installation

The Vanilo Admin package used to be the part of the vanilo/framework package in versions 0.x, 1.x and 2.x.

Beginning with v3.x, the Admin has been extracted from the Framework, and now it is optional.

#Installation

The Admin package can be installed using composer:

1. First, install the Vanilo Framework
2. composer req vanilo/admin '^4.0'
3. Edit config/concord.php and add this content under the modules key:

    'modules' => [
        //... preserve the existing content of the file!
        Konekt\AppShell\Providers\ModuleServiceProvider::class => [
            'ui' => [
                'name' => 'Shop Admin', // Your app's name to display on admin
                'url'  => '/admin/product', // Base/Home URL after login (eg. dashboard)
            ],
        ],
        Vanilo\Admin\Providers\ModuleServiceProvider::class,  
    ],
   

4. Make sure you have Laravel Authentication set up in the target application, eg. using Laravel Breeze.
5. Set up the user model (see instructions below)
6. Create an admin user: php artisan make:superuser
7. Install the following npm packages:

   npm add [email protected] [email protected] popper.js
   

8. Configure the frontend build tools
9. Compile the assets: npm run dev

#Setting Up The User Model

There are multiple ways of setting up the user models. You can find two possibilities below. Feel free to use your own solution and/or further customize them.

It is also possible to use separate models for shoppers and admins.

#Variant 1 - Simple

Modify App\Models\User so that it extends Vanilo's user model:

// app/Models/User.php
namespace App\Models;

// No need to use Laravel default traits and properties as
// they're already present in the base class exactly as
// they're defined in a default Laravel installation
class User extends \Konekt\AppShell\Models\User
{
}

#Variant 2 - Flexible

In case you don't want to extend the Konekt User, then it's sufficient just to implement its interface:

// app/Models/User.php
// ... The default User model or arbitrary code for your app

// You can use any other base class eg: TCG\Voyager\Models\User
use Illuminate\Foundation\Auth\User as Authenticatable;
use Konekt\User\Contracts\Profile;
use Konekt\User\Contracts\User as UserContract;
use Konekt\Acl\Traits\HasRoles;

class User extends Authenticatable implements UserContract
{
    use HasRoles;
    
    // ...
    
    // Implement these methods from the required Interface:
    public function inactivate()
    {
        $this->is_active = false;
        $this->save();
    }

    public function activate()
    {
        $this->is_active = true;
        $this->save();
    }

    public function getProfile(): ?Profile
    {
        return null;
    }
    
    // ...
}

#Step 3 - Register The Model

And add this to you AppServiceProviders's boot method:

// app/Providers/AppServiceProvider.php
$this->app->concord->registerModel(\Konekt\User\Contracts\User::class, \App\Models\User::class);

#Frontend Build

#Vite Config

Update the vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js',
                'resources/css/app.css',
                'vendor/konekt/appshell/src/resources/assets/sass/appshell.sass',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        },
    },
    build: {
        outDir: 'public',
        rollupOptions: {
            input: {
                appJs: 'resources/js/app.js',
                appshellJs: 'vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js',
                appStyles: 'resources/css/app.css',
                appshellStyles: 'vendor/konekt/appshell/src/resources/assets/sass/appshell.sass',
            },
            output: {
                entryFileNames: ({ name }) => {
                    if (name === 'appshellJs') {
                        return 'js/appshell.js';
                    }
                    if (name === 'appJs') {
                        return 'js/app.js'
                    }
                    return 'js/[name].js';
                },
                chunkFileNames: 'js/[name].js',
                assetFileNames: ({ name }) => {
                    if (/^appStyles\.css$/.test(name ?? '')) {
                        return 'css/app.css';
                    }
                    if (/^appshellStyles\.css$/.test(name ?? '')) {
                        return 'css/appshell.css';
                    }
                    if (/\.css$/.test(name ?? '')) {
                        return 'css/[name].[ext]';
                    }
                    return 'assets/[name].[ext]';
                },
            },
        },
        emptyOutDir: false,
    },
});

#Laravel Mix

1. Install Laravel Mix
2. Add Admin's CSS To Laravel Mix:

   let mix = require('laravel-mix');
   // webpack.mix.js
   mix.js('resources/js/app.js', 'public/js')
    // Add these 2 lines:
   .js('vendor/konekt/appshell/src/resources/assets/js/appshell.standalone.js', 'public/js/appshell.js')
   .sass('vendor/konekt/appshell/src/resources/assets/sass/appshell.sass', 'public/css')
    // Keep this for the "rest" (usually public frontend)
   .sass('resources/sass/app.scss', 'public/css');
   

3. Update the postcss.config.file to ensure compatibility with webpack and laravel-mix:

   // From
   export default {
       plugins: {
           tailwindcss: {},
           autoprefixer: {},
       },
   };
   
   // To
   module.exports = {
       plugins: [
           require('autoprefixer')()
       ]
   }
   

4. Update the package.json file:
   If the type field is present either remove it, or rename to "commonjs"

   {
     "type": "module", 
     "scripts": {
       "dev": "mix"
     }
   }