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_app.menu in the configuration file

yaml
# config/package/enhavo_app.yaml
enhavo_app:
    menu:
        book:
            type: link
            label: Book
            route: app_admin_book_index
            role: ROLE_APP_BOOK_INDEX

Frame Manager ​

tbc.

Routing generator ​

We implemented a short routing generator.

bash
bin/console make:enhavo:routing app.book

Template Resolver ​

tbc.

Mailer manager ​

tbc.