Sylius Stack
  • Sylius Stack Documentation
  • Getting started
  • Cookbook
    • How to customize your admin panel
      • Basic operations
      • Customizing your grids
      • Customizing the logo
      • Customizing the menu
      • Configuring the security access
      • Customizing the page titles
    • How to use in a DDD architecture
      • Architecture overview
      • Resource configuration
      • Basic operations
      • Operation using a grid
  • Admin UI
    • Getting started
  • Bootstrap Admin UI
    • Getting started
  • Resource
    • Resource Bundle documentation
      • Installation
      • Create new resource
      • Configure your resource
      • Configure your operations
      • Validation
      • Redirect
      • Resource factories
      • Providers
      • Processors
      • Responders
      • Legacy Resource Documentation
        • Configuration
        • Services
        • Routing
        • Forms
        • Getting a Single Resource
        • Getting a Collection of Resources
        • Creating Resources
        • Updating Resources
        • Deleting Resources
        • Configuring a state machine
        • Configuration Reference
  • Grid
    • Grid Bundle documentation
      • Installation
      • Creating your first grid
      • Configuring Fields
      • Field types
      • Creating a custom Field Type
      • Creating a custom Action
      • Creating a custom Bulk Action
      • Filters
      • Creating a custom Filter
      • Advanced configuration
      • Configuration Reference
  • 🍀Twig Extra
    • Getting started
  • 🌱Twig Hooks
    • Getting started
    • Passing data to your hookables
    • Making your hookables configurable
    • Autoprefixing feature
    • Composable Layouts with a predictable structure
    • Advanced
      • Ergonomic work with hooks
      • Metadata objects
      • Multiple hooks inside a single template
      • Overriding hookables
Powered by GitBook
On this page
  • Setup an admin panel
  • Create a new project
  • Install the package using Composer and Symfony Flex
  • Install missing tom-select assets
  • Run your web server
  • Using AssetMapper

Getting started

Setup an admin panel

The Sylius Stack comes with a bunch of components that work great independently, but when they come together, that's when the stack's magic truly operates! Indeed, the highlight of this project is the ability to configure an admin panel UI within minutes.

Create a new project

You can set up the Sylius Stack on existing Symfony projects, but in the case you are starting from scratch, here is what you need to do.

# With Composer:
composer create-project symfony/skeleton my_project

# Or with Symfony CLI:
symfony new --docker --php 8.4 my_project

Install the package using Composer and Symfony Flex

Go to your project directory and run the following command:

composer require -W \
  doctrine/orm "^2.16" \
  doctrine/doctrine-bundle \
  pagerfanta/doctrine-orm-adapter \
  symfony/asset-mapper \
  sylius/bootstrap-admin-ui \
  sylius/ui-translations

Type "a" or "p" to configure the packages via Symfony Flex.

Install missing tom-select assets

symfony console importmap:require tom-select/dist/css/tom-select.default.css

Run your web server

docker compose up -d
symfony serve -d

The admin panel is ready to use. Now, it's your turn!

Using AssetMapper

To prevent duplicate Ajax calls, disable the auto-initialized Stimulus app and Symfony UX stylesheets from the sylius/bootstrap-admin-ui package, so you can take control of Stimulus initialization in your own code.

Disabling Stimulus app & Symfony UX stylesheets from third party package

First, you need to disable the Stimulus App started by the sylius/bootstrap-admin-ui package.

# config/packages/sylius_bootstrap_admin_ui.yaml
# ...
sylius_twig_hooks:
    hooks:
        # ...
        # Disabling Symfony UX stylesheets
        'sylius_admin.base#stylesheets':
            symfony_ux:
                enabled: false    
           
        # Disabling Stimulus App        
        'sylius_admin.base#javascripts':
            symfony_ux:
                enabled: false
config/packages/sylius_bootstrap_admin_ui.php
use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;

return static function (ContainerConfigurator $containerConfigurator): void {
    // ...

    $containerConfigurator->extension('sylius_twig_hooks', [
        'hooks' => [
            'sylius_admin.base#stylesheets' => [
                // Disabling Symfony UX stylesheets
                'symfony_ux' => [
                    'enabled' => false,
                ],
            ],
            
            'sylius_admin.base#javascripts' => [
                // Disabling Stimulus App        
                'symfony_ux' => [
                    'enabled' => false,
                ],
            ],
        ],    
    ]);
};

Starting Stimulus App

// assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bundle';

const app = startStimulusApp();
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);
// assets/app.js
import './bootstrap.js';
// ...
PreviousSylius Stack DocumentationNextHow to customize your admin panel

Last updated 1 month ago

Flex recipes
Admin dashboard overview