Symfony Quick Start Guide

This guide teaches you how to integrate a Symfony application with dotCMS and use the Universal Visual Editor to manage content rendered in your Symfony application.

Overview

dotCMS integrates with Symfony to support a wide assortment of features. We'll be focusing on:

Creating and authenticating a Symfony front end for use with the dotCMS back end
Configuring your site to integrate with the Universal Visual Editor (UVE)
Editing page layout and content with the UVE

Prerequisites

Symfony: PHP 8.1+ and Composer installed
Basic Knowledge: Familiarity with Symfony fundamentals and REST/API concepts

Step 1: Clone the Symfony Example Application

Use the official dotCMS Symfony example from our repository. You can perform a sparse checkout of the example without cloning the entire dotCMS core repository as follows:

git clone -n --depth=1 --filter=tree:0 https://github.com/dotCMS/dotcms-php-sdk
cd dotcms-php-sdk
git sparse-checkout set $(git sparse-checkout list) --no-cone examples/dotcms-symfony
git pull origin main
cd examples/dotcms-symfony

Step 2: Configure and Run

Generate an API Token

Before setting up your Symfony application, access the demo.dotcms.com instance (or your local instance) and generate an API Access Token for the Admin User:

If accessing the dotCMS demo instance:
- https://demo.dotcms.com/dotAdmin
  - User: admin@dotcms.com
  - PW: admin
- Note: The demo instance is reset twice per day
Create an API Access Token:
- Navigate to Settings > Users
- Select the Admin User
- Click the API Access Tokens tab
- Click the Request New Token button.

Configure Your Connection to dotCMS

Copy the .env.example file to .env:

cp .env.example .env

Update the .env file with your dotCMS credentials:

DOTCMS_HOST=https://demo.dotcms.com
DOTCMS_API_KEY=your-token-here

Replace your-token-here with the API token you generated above.

Install Dependencies

Install PHP and Node.js dependencies from the project folder:

composer install

Run Your Symfony Application

Run the following:

symfony server:start

Your application will be available at http://localhost:8000

Step 3: Universal Visual Editor

The DotCMS Universal Visual Editor (UVE) provides a seamless editing experience directly on your Symfony website. This editor offers a powerful way to build pages, with features including, but not limited to:

In-context editing: Edit content directly on your website
Drag-and-drop interface: Easily arrange components on the page
Responsive design tools: Preview and edit for different screen sizes

Enabling the Universal Visual Editor

Next, configure the Universal Visual Editor application within your dotCMS instance. This will allow it to recognize the Symfony application and render it in the UVE.

In dotCMS, navigate to Settings > Apps and click on “UVE - Universal Visual Editor”
Click the plus button at the right of the site we're integrating (i.e., demo.dotcms.com).
In the Configuration field, add the following JSON object, which contains the URL for your local Symfony application:

{
  "config": [
    {
      "pattern": ".*",
      "url": "http://localhost:8000"
    }
  ]
}

Click Save.

Now, navigate to Site > Pages > Home to check out the Symfony application integrated with dotCMS!

Editing Content in the Universal Visual Editor

Now, let’s perform a few quick editing exercises on the Home page.

Drag and Drop Content

Click on the X icon at the top right of the Explore the World banner
- This will remove the banner once you Accept the change.
  - You will now see an empty container on the page.
In the Content Palette, on the right, browse into the Banner content type by clicking its corner arrow.
Drag a new Banner contentlet into the empty box on the page.
The new banner will render and the page will be saved.

Adjust Layout of the Page

Click on the Layout tool in the rightmost panel.
Drag a Row from the toolbar and drop it below the first existing row.
Grab two more Box items and drag them into the new row.
Resize them all to be equal widths.
Click the Content button in the right panel, and see the four empty containers.

Add Content

Let’s fill the new boxes! Click on the Product content type on the Content Palette.
- If you can't find it, use the search field at the top.
Drag some Products into the empty slots.
Click the mode dropdown in the top left, and select Preview to see how it looks without UVE controls.
Click back to Draft to get back to Edit Mode.
Click the blue Publish button on the top right corner of the screen.

Check Your App

Now refresh the browser window that has the Symfony application running (localhost:8000), and you will see the changes you made through the Universal Visual Editor.

Step 4: Crescendo

Congratulations — you're now up and running with dotCMS and Symfony, with the ability to visually edit content through the Universal Visual Editor.

Compose something great!