Installation - RevisionTen/cms GitHub Wiki

Preparation

Create your Symfony application:

symfony new --webapp my_project --version=5.4

Step 1. Install the CMS bundle via composer

Make sure you mailer is configured by uncommenting MAILER_DSN in your .env file:

###> symfony/mailer ###
MAILER_DSN=smtp://localhost
###< symfony/mailer ###

Add the slugify bundle to your bundles. This needs to happen before the CMS bundle is installed, because the bundle is not added automatically.

// config/bundles.php
return [
    // ...
    Cocur\Slugify\Bridge\Symfony\CocurSlugifyBundle::class => ['all' => true],
];

Install the CMS bundle and its dependencies with this command:

composer req revision-ten/cms

Step 2: Fix bundle order

Make sure the newly added bundles in config/bundles.php are in this order:

return [
    // ...
    Cocur\Slugify\Bridge\Symfony\CocurSlugifyBundle::class => ['all' => true],
    Gregwar\ImageBundle\GregwarImageBundle::class => ['all' => true],
    RevisionTen\CQRS\CQRSBundle::class => ['all' => true],
    RevisionTen\CMS\CMSBundle::class => ['all' => true],
    RevisionTen\Forms\FormsBundle::class => ['all' => true],
]

Step 3: Add routes

Add the routes to your /config/routes.yaml:

cmsbundle_backend:
    resource: "@CMSBundle/Resources/config/backend_routes.yaml"
    prefix:   /
    
cmsbundle_frontend: # Include the frontend routes last (catch-all).
    resource: "@CMSBundle/Resources/config/frontend_routes.yaml"
    prefix:   /

Step 4: Update you database schema

Run bin/console doctrine:schema:update --force to update your database schema.

Step 5: Choose your security configuration

Delete your security configuration file (config/packages/security.yaml) to use the default security configuration that comes with this bundle, or copy the contents of /vendor/revision-ten/cms/Resources/config/security.yaml to your own security config.

Step 6: Update your assets

Run bin/console assets:install --symlink to install the bundle assets.

Setup

Install the default roles with the command bin/console cms:install:roles.

Create an admin user with the command: bin/console cms:user:create.

You will be mailed a QR-code that you need for logging in.

If you lost your QR-code you can use this command to generate a new one: bin/console cms:user:generate_secret

Start your web-server and login at /login.

Configuration

You can find the full configuration in /vendor/revision-ten/cms/Resources/config/cms.yaml.

Extend your Bootstrap spacing classes

Install webpack encore (use Yarn as a package manager) and install Bootstrap 5 with Yarn.

Add a 6er-spacing Bootstrap utility class to your css.

// _variables.scss
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
    (
        0: 0,
        1: ($spacer * .25),
        2: ($spacer * .5),
        3: $spacer,
        4: ($spacer * 1.5),
        5: ($spacer * 3),
        6: ($spacer * 6), // Additional spacer definition for extra large spacing
    ),
    $spacers
);

Add the following SCSS to make sure the backend element editor CSS looks right in Bootstrap 5:

// components/_editor.scss or standalone editor.scss
@import "variables";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

.editor-grid.row {
    margin-left: -($grid-gutter-width/2)!important;
    margin-right: -($grid-gutter-width/2)!important;
    width: auto;
    max-width: unset;
}
.editor-grid .col::after,
[data-type="Row"]::before,
[data-type="Column"]::before {
    left: $grid-gutter-width/2!important;
    right: $grid-gutter-width/2!important;
}
@each $name, $width in $spacers {
    .row.gx-#{$name} > .editor-grid .col::after,
    [data-type="Row"].gx-#{$name}::before,
    .row.gx-#{$name} [data-type="Column"]::before {
        left: $width/2!important;
        right: $width/2!important;
    }
    .row.gx-#{$name} > * > .ui-resizable-e {
        right: (($width/2) - .5rem)!important;
    }
}
[data-uuid].alert::before,
body.body-edit.hide-editor [data-uuid]::before {
    background: none!important;
}
body .alert .editor .text-dark {
    color: $white!important;
}
[data-uuid] > * {
    clear: both;
}

Caching

The cms uses a shared memory segment to keep the cache consistent across multiple apcu processes.

You can list the shared memory segments with the command: ipcs -m It will output something like this:

------ Shared Memory Segments --------
key        shmid      owner      perms      bytes      nattch     status                         
0x00000001 2752520    automb     666        10485760   0   

If for whatever reason the SHM can't be created, the cache will be disabled.