Skip to content

Latest commit

 

History

History
218 lines (185 loc) · 6.33 KB

admin-installation.md

File metadata and controls

218 lines (185 loc) · 6.33 KB

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 bootstrap@5.3 alpinejs@3.10 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"
      }
    }