Enhavo Docs

Appearance

App bundle ​

Introduction ​

The AppBundle provides a clean user interface for the ResourceBundle with integration for vite and vue and other helpful features to build your own application. The admin ui is highly customizable.

The bundle also provide features for easy extending templates, managing your translation and routing in the frontend.

Installation ​

bash
$ composer require enhavo/app-bundle
$ yarn install @enhavo/app

Add js dependency injection service file at assets/admin/container.di.yaml

yaml
# 
imports:
    - path: '@enhavo/app/services/enhavo/*'

Create a vite config file at assets/admin/vite.config.js

js
import { defineConfig, splitVendorChunkPlugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import liveReload from 'vite-plugin-live-reload'
import path from 'node:path'
import 'dotenv/config'
import containerDIPlugin from '@enhavo/app/vite/rollup-plugin-container-di'
import {fantasticon} from "@enhavo/app/vite/fantasticon-plugin/plugin.js";
import {fantasticonSetting} from "@enhavo/app/vite/fantasticon-settings.js";

export default defineConfig({
    plugins: [
        vue(),
        splitVendorChunkPlugin(),
        containerDIPlugin(),
        fantasticon(fantasticonSetting({
            outputDir: path.resolve(__dirname, '../../public/build/admin'),
        })),
    ],

    // config
    root: path.resolve(__dirname),
    base: '/build/admin/',
    build: {
        // output dir for production build
        outDir: '../../public/build/admin',
        emptyOutDir: true,

        // emit manifest so PHP can find the hashed files
        manifest: true,

        rollupOptions: {
            input: '/entrypoints/application.js',
        }
    },
    server: {
        strictPort: true,
        port: process.env.VITE_ADMIN_PORT,
        origin: 'http://localhost:' + process.env.VITE_ADMIN_PORT
    },
    resolve: {
        preserveSymlinks: true,
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js'
        }
    },
})

Add ts config file at assets/admin/tsconfig.json

json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

Add entrypoint file at assets/admin/entrypoints

js
import container from "../container.di.yaml";
import {Kernel} from "@enhavo/app/kernel/Kernel";
import $ from 'jquery';
import "fantasticon:icon";

window.$ = $;
window.jQuery = $;

let kernel = new Kernel(container);
kernel.boot();

The main menu in the admin backend is configurable via the parameter enhavo_admin.menu in the configuration file app/config/enhavo.yml. The logout button will be added automatically.

yaml
enhavo_admin:
    menu:
        user:
            type: base
            label: label.user
            route: enhavo_user_user_index
            role: ROLE_ESPERANTO_USER_USER_INDEX
        group:
            type: base
            label: label.group
            route: enhavo_user_group_index
            role: ROLE_ESPERANTO_USER_GROUP_INDEX
        my_resource:
            type: base
            label: My Resource
            route: acme_my_resource_index
            role: ROLE_MY_RESOURCE_INDEX

Frame Manager ​

tbc.

Routing generator ​

We implemented a short routing generator, which creates minimal CRUD routing definitions for your resource.

bash
app/console make:enhavo:routing app resource [--sorting="property"]

If the optional parameter sorting is present, the entity is considered to be sortable by the user. The value of sorting is the name of the integer property of the resource entity used to save the position of the object.

Template Resolver ​

tbc.

Mailer manager ​

tbc.